import ChoiceSetting from "@/components/settings/ChoiceSetting";
import SettingRow from "@/components/settings/SettingRow";
import SettingsCard from "@/components/settings/SettingsCard";
import SwitchSetting from "@/components/settings/SwitchSetting";
import { Switch } from "@/components/ui/switch";
import { useSetting } from "@/hooks/useSettings";
import { __ } from "@wordpress/i18n";
import ProBehaviours from "../components/ProBehaviours";
import TableHeadingSettings from "../components/TableHeadingSettings";
import {
  DESCRIPTION_SOURCES,
  IMAGE_SIZES,
  STOCK_DISPLAYS,
  VARIATION_MODES,
} from "../constants";

/** One switch for both sticky labels and sticky header. */
const StickySwitch = () => {
  const [labels, setLabels] = useSetting("table.sticky_labels", true);
  const [, setHeader] = useSetting("table.sticky_header", true);
  const title = __(
    "Sticky labels and header",
    "product-comparison-for-woocommerce",
  );

  return (
    <SettingRow
      id="pcfw-sticky"
      title={title}
      description={__(
        "Labels and product names stay visible while scrolling.",
        "product-comparison-for-woocommerce",
      )}
    >
      <Switch
        aria-labelledby="pcfw-sticky"
        checked={Boolean(labels)}
        onCheckedChange={(next) => {
          setLabels(next);
          setHeader(next);
        }}
      />
    </SettingRow>
  );
};

/** Table fields › Table behaviour. */
const BehaviourSection = () => (
  <SettingsCard
    title={__("Table behaviour", "product-comparison-for-woocommerce")}
  >
    <TableHeadingSettings />
    <ChoiceSetting
      path="table.image_size"
      options={IMAGE_SIZES}
      title={__("Product image size", "product-comparison-for-woocommerce")}
      description={__(
        "Original keeps the uploaded image; the others use your shop’s image sizes.",
        "product-comparison-for-woocommerce",
      )}
    />
    <ChoiceSetting
      path="table.description_source"
      options={DESCRIPTION_SOURCES}
      title={__("Description row shows", "product-comparison-for-woocommerce")}
      description={__(
        "The product’s short or full description. Short falls back to the start of the full one; None hides the row.",
        "product-comparison-for-woocommerce",
      )}
    />
    <SwitchSetting
      path="table.highlight_differences"
      title={__("Highlight differences", "product-comparison-for-woocommerce")}
      description={__(
        "Rows where products differ get a soft highlight.",
        "product-comparison-for-woocommerce",
      )}
    />
    <SwitchSetting
      path="table.hide_empty_rows"
      title={__("Hide empty rows", "product-comparison-for-woocommerce")}
      description={__(
        "Skip rows with no value for any product.",
        "product-comparison-for-woocommerce",
      )}
    />
    <SwitchSetting
      path="table.show_only_differences_toggle"
      title={__(
        "“Only differences” switch",
        "product-comparison-for-woocommerce",
      )}
      description={__(
        "Shoppers can hide the rows that are the same.",
        "product-comparison-for-woocommerce",
      )}
    />
    <SwitchSetting
      path="table.default_only_differences"
      title={__(
        "Start with “only differences” on",
        "product-comparison-for-woocommerce",
      )}
      description={__(
        "Shoppers can switch it off from the table.",
        "product-comparison-for-woocommerce",
      )}
    />
    <StickySwitch />
    <SwitchSetting
      path="table.repeat_price_cart_bottom"
      title={__(
        "Repeat price and Add to cart at the bottom",
        "product-comparison-for-woocommerce",
      )}
      description={__(
        "Useful for long tables.",
        "product-comparison-for-woocommerce",
      )}
    />
    <ChoiceSetting
      path="table.variation_mode"
      options={VARIATION_MODES}
      title={__("Variable products", "product-comparison-for-woocommerce")}
      description={__(
        "Compare the variation the shopper picked, or the parent product.",
        "product-comparison-for-woocommerce",
      )}
    />
    <ChoiceSetting
      path="table.stock_display"
      options={STOCK_DISPLAYS}
      pro
      title={__("Stock display", "product-comparison-for-woocommerce")}
      description={__(
        "Show availability as text, a status icon with the text, or the icon alone (the text stays for screen readers).",
        "product-comparison-for-woocommerce",
      )}
    />
    <ProBehaviours />
  </SettingsCard>
);

export default BehaviourSection;