import ChoiceSetting from "@/components/settings/ChoiceSetting";
import SettingsCard from "@/components/settings/SettingsCard";
import StepperSetting from "@/components/settings/StepperSetting";
import SwitchSetting from "@/components/settings/SwitchSetting";
import { useSetting } from "@/hooks/useSettings";
import { __ } from "@wordpress/i18n";
import { POPUP_LAYOUTS } from "../../design/constants";
import { DISPLAY_MODES, OPEN_AFTER_ADD } from "../constants";

/**
 * General › Comparison: on/off, where it opens (and the popup's layout,
 * the same setting as Design › Popup) and how many products. Who and what
 * can be compared is under Rules (Pro).
 */
const ComparisonSection = () => {
  const [mode] = useSetting("general.display_mode", "popup");

  return (
    <SettingsCard
      title={__("Comparison", "product-comparison-for-woocommerce")}
      description={__(
        "How the comparison opens and how many products it holds.",
        "product-comparison-for-woocommerce",
      )}
    >
      <SwitchSetting
        path="general.enabled"
        title={__("Enable comparison", "product-comparison-for-woocommerce")}
        description={__(
          "Turn off to hide every Compare button, bar and popup without losing settings.",
          "product-comparison-for-woocommerce",
        )}
      />
      <ChoiceSetting
        path="general.display_mode"
        title={__("Open comparison in", "product-comparison-for-woocommerce")}
        description={__(
          "Popup is full screen on phones.",
          "product-comparison-for-woocommerce",
        )}
        options={DISPLAY_MODES}
      />
      {mode !== "page" && (
        <ChoiceSetting
          source="design"
          path="popup_layout"
          title={__("Popup layout", "product-comparison-for-woocommerce")}
          description={__(
            "A centred dialog, or a full-screen overlay that scrolls like a page.",
            "product-comparison-for-woocommerce",
          )}
          options={POPUP_LAYOUTS}
        />
      )}
      <ChoiceSetting
        path="general.open_after_add"
        title={__(
          "Open it automatically",
          "product-comparison-for-woocommerce",
        )}
        description={__(
          "“Second product” opens it once there is something to compare.",
          "product-comparison-for-woocommerce",
        )}
        options={OPEN_AFTER_ADD}
      />
      <StepperSetting
        path="general.limit"
        title={__(
          "Products per comparison",
          "product-comparison-for-woocommerce",
        )}
        description={__(
          "Shoppers see a friendly message when the list is full.",
          "product-comparison-for-woocommerce",
        )}
        min={2}
        max={6}
      />
    </SettingsCard>
  );
};

export default ComparisonSection;