import { ProBadge } from "@/components/plan-badges";
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 { IS_PRO } from "@/lib/env";
import { __ } from "@wordpress/i18n";
import { ALSO_POSITIONS } from "../constants";

const D = "product-comparison-for-woocommerce";

/**
 * Engage › On the product page (Pro): "People also compared" and
 * "Recently compared", shown after the product's tabs.
 */
const ProductPageSection = () => {
  const [also] = useSetting("engage.also_compared", false);

  return (
    <SettingsCard
      title={__("On the product page", D)}
      badge={<ProBadge />}
      description={__("Help shoppers decide before they leave the page.", D)}
    >
      <SwitchSetting
        path="engage.also_compared"
        pro
        title={__("“People also compared”", D)}
        description={__(
          "Products shoppers most often compared with this one, counted once a day per shopper.",
          D,
        )}
      />
      {also && IS_PRO && (
        <>
          <ChoiceSetting
            path="engage.also_position"
            options={ALSO_POSITIONS}
            title={__("Position", D)}
            description={__(
              "Block only: place the People Also Compared block (block themes, page builders).",
              D,
            )}
          />
          <StepperSetting
            path="engage.also_limit"
            title={__("Products to show", D)}
            min={2}
            max={8}
          />
        </>
      )}
      <SwitchSetting
        path="engage.recently_compared"
        pro
        title={__("Recently compared", D)}
        description={__(
          "The products this shopper added to a comparison before (remembered in a small cookie).",
          D,
        )}
      />
    </SettingsCard>
  );
};

export default ProductPageSection;