import TextSetting from "@/components/settings/TextSetting";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { useSetting } from "@/hooks/useSettings";
import { __ } from "@wordpress/i18n";
import { LOOP_POSITIONS } from "../constants";

/**
 * Where the button sits in the shop grid: full-width option cards (as in
 * the prototype), with hook name and priority fields for "Custom hook".
 */
const LoopPositionSetting = () => {
  const [position, setPosition] = useSetting("button.loop_position");
  const [hook] = useSetting("button.custom_hook.loop", "");
  const title = __(
    "Position in the shop grid",
    "product-comparison-for-woocommerce",
  );

  return (
    <div className="ino:border-t ino:border-border/70 ino:py-4">
      <div
        id="pcfw-loop-position"
        className="ino:text-sm ino:font-medium ino:text-foreground"
      >
        {title}
      </div>
      <p className="ino:mt-0.5 ino:mb-3 ino:text-[13px] ino:leading-snug ino:text-muted-foreground">
        {__(
          "Works with classic loops and Product Collection blocks. The product page has its own position below.",
          "product-comparison-for-woocommerce",
        )}
      </p>
      <RadioGroup
        aria-labelledby="pcfw-loop-position"
        value={position}
        onValueChange={setPosition}
        className="ino:gap-2"
      >
        {LOOP_POSITIONS.map((option) => (
          <label
            key={option.value}
            className="ino:flex ino:cursor-pointer ino:items-center ino:gap-2.5 ino:rounded-lg ino:border ino:border-border ino:bg-background ino:px-3 ino:py-2.5 ino:text-sm ino:transition-colors ino:hover:bg-muted/50 ino:has-data-checked:border-primary ino:has-data-checked:bg-primary/5 ino:has-data-checked:ring-1 ino:has-data-checked:ring-primary"
          >
            <RadioGroupItem
              value={option.value}
              className="ino:border-[1.5px] ino:border-muted-foreground/70"
            />
            {option.label}
          </label>
        ))}
      </RadioGroup>
      {position === "custom_hook" && !hook && (
        <p className="ino:mt-3 ino:mb-0 ino:rounded-lg ino:border ino:border-amber-200 ino:bg-amber-50 ino:px-3 ino:py-2 ino:text-[13px] ino:text-amber-900">
          {__(
            "Enter a hook name. Until then the button shows after Add to cart.",
            "product-comparison-for-woocommerce",
          )}
        </p>
      )}
      {position === "custom_hook" && (
        <div className="ino:mt-3 ino:flex ino:flex-wrap ino:gap-3">
          <TextSetting
            path="button.custom_hook.loop"
            label={__("Hook name", "product-comparison-for-woocommerce")}
            placeholder="woocommerce_after_shop_loop_item"
            className="ino:w-72"
            mono
          />
          <TextSetting
            path="button.custom_hook.loop_priority"
            label={__("Priority", "product-comparison-for-woocommerce")}
            className="ino:w-24"
            mono
          />
        </div>
      )}
    </div>
  );
};

export default LoopPositionSetting;