import StepperSetting from "@/components/settings/StepperSetting";
import { Badge } from "@/components/ui/badge";
import { useSetting } from "@/hooks/useSettings";
import { __ } from "@wordpress/i18n";
import OptionCard from "../components/OptionCard";

const Check = ({ path, title, description }) => {
  const [value, setValue] = useSetting(path, true);
  return (
    <OptionCard
      checked={Boolean(value)}
      onChange={setValue}
      title={title}
      description={description}
    />
  );
};

const MODES = [
  {
    value: "popup",
    title: __("Popup", "product-comparison-for-woocommerce"),
    description: __(
      "Full screen on phones",
      "product-comparison-for-woocommerce",
    ),
    recommended: true,
  },
  {
    value: "page",
    title: __("Compare page", "product-comparison-for-woocommerce"),
    description: __(
      "Opens the Compare page",
      "product-comparison-for-woocommerce",
    ),
  },
  {
    value: "both",
    title: __("Both", "product-comparison-for-woocommerce"),
    description: __(
      "Popup with a “Full page” link",
      "product-comparison-for-woocommerce",
    ),
  },
];

/** Wizard step 1: where shoppers compare and how it opens. */
const PlacementStep = () => {
  const [mode, setMode] = useSetting("general.display_mode", "popup");

  return (
    <div className="ino:flex ino:flex-col ino:gap-6">
      <fieldset className="ino:m-0 ino:flex ino:flex-col ino:gap-2.5 ino:border-0 ino:p-0">
        <legend className="ino:mb-2.5 ino:text-sm ino:font-semibold">
          {__("Compare button and bar", "product-comparison-for-woocommerce")}
        </legend>
        <Check
          path="button.show_in_loop"
          title={__(
            "Shop and category pages",
            "product-comparison-for-woocommerce",
          )}
          description={__(
            "Button below Add to cart, also in Product Collection blocks",
            "product-comparison-for-woocommerce",
          )}
        />
        <Check
          path="button.show_on_single"
          title={__(
            "Single product page",
            "product-comparison-for-woocommerce",
          )}
          description={__(
            "Button after Add to cart",
            "product-comparison-for-woocommerce",
          )}
        />
        <Check
          path="bar.enabled"
          title={__("Sticky compare bar", "product-comparison-for-woocommerce")}
          description={__(
            "Appears after the first product is added, with “+ Add more” search",
            "product-comparison-for-woocommerce",
          )}
        />
        <p className="ino:m-0 ino:text-[13px] ino:text-muted-foreground">
          {__(
            "Want a header counter? Add the Compare Counter block or the [pcfw_compare_counter] shortcode to your header.",
            "product-comparison-for-woocommerce",
          )}
        </p>
      </fieldset>
      <fieldset className="ino:m-0 ino:border-0 ino:p-0">
        <legend className="ino:mb-2.5 ino:text-sm ino:font-semibold">
          {__("Open the comparison in", "product-comparison-for-woocommerce")}
        </legend>
        <div className="ino:grid ino:grid-cols-[repeat(auto-fit,minmax(160px,1fr))] ino:gap-2.5">
          {MODES.map((m) => (
            <OptionCard
              key={m.value}
              type="radio"
              name="pcfw-mode"
              checked={mode === m.value}
              onChange={() => setMode(m.value)}
              title={m.title}
              description={m.description}
              extra={
                m.recommended && (
                  <Badge variant="secondary">
                    {__("Recommended", "product-comparison-for-woocommerce")}
                  </Badge>
                )
              }
            />
          ))}
        </div>
      </fieldset>
      <StepperSetting
        path="general.limit"
        min={2}
        max={6}
        title={__(
          "Products per comparison",
          "product-comparison-for-woocommerce",
        )}
        description={__(
          "Phones show 2 side by side and swipe the rest",
          "product-comparison-for-woocommerce",
        )}
      />
    </div>
  );
};

export default PlacementStep;