import ChoiceSetting from "@/components/settings/ChoiceSetting";
import SettingsCard from "@/components/settings/SettingsCard";
import SwitchSetting from "@/components/settings/SwitchSetting";
import TextSetting from "@/components/settings/TextSetting";
import { __ } from "@wordpress/i18n";
import IconSetting from "../components/IconSetting";
import LoopPositionSetting from "../components/LoopPositionSetting";
import { DEFAULT_LABELS, SINGLE_POSITIONS, STYLES } from "../constants";

/**
 * Buttons › Compare button: where it shows, its style, icon and labels.
 */
const ButtonSection = () => (
  <SettingsCard
    title={__("Compare button", "product-comparison-for-woocommerce")}
    description={__(
      "Where the Compare button shows, its style, icon and text.",
      "product-comparison-for-woocommerce",
    )}
  >
    <SwitchSetting
      path="button.show_in_loop"
      title={__(
        "Shop and category pages",
        "product-comparison-for-woocommerce",
      )}
      description={__(
        "Also inside Product Collection blocks.",
        "product-comparison-for-woocommerce",
      )}
    />
    <SwitchSetting
      path="button.show_on_single"
      title={__("Single product page", "product-comparison-for-woocommerce")}
      description={__(
        "Next to Add to cart.",
        "product-comparison-for-woocommerce",
      )}
    />
    <LoopPositionSetting />
    <ChoiceSetting
      path="button.single_position"
      title={__(
        "Position on the product page",
        "product-comparison-for-woocommerce",
      )}
      options={SINGLE_POSITIONS}
    />
    <ChoiceSetting
      path="button.style"
      title={__("Style", "product-comparison-for-woocommerce")}
      options={STYLES}
    />
    <IconSetting />
    <div className="ino:grid ino:grid-cols-[repeat(auto-fit,minmax(180px,1fr))] ino:gap-4 ino:border-t ino:border-border/70 ino:py-4">
      <TextSetting
        path="button.label_add"
        label={__("Label", "product-comparison-for-woocommerce")}
        placeholder={DEFAULT_LABELS.add}
      />
      <TextSetting
        path="button.label_added"
        label={__("Label when added", "product-comparison-for-woocommerce")}
        placeholder={DEFAULT_LABELS.added}
      />
      <TextSetting
        path="button.label_remove"
        label={__(
          "Label on hover to remove",
          "product-comparison-for-woocommerce",
        )}
        placeholder={DEFAULT_LABELS.remove}
      />
    </div>
  </SettingsCard>
);

export default ButtonSection;