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 TextSetting from "@/components/settings/TextSetting";
import { useSetting } from "@/hooks/useSettings";
import { IS_PRO } from "@/lib/env";
import { __ } from "@wordpress/i18n";
import { QUICK_POSITIONS, QUICK_SOURCES } from "../constants";

/**
 * Engage › Quick comparison table (Pro): "Compare with similar" on the
 * product page, the product first. The details show once it's on.
 */
const QuickTableSection = () => {
  const [enabled] = useSetting("quick_table.enabled", false);

  return (
    <SettingsCard
      title={__("Quick comparison table", "product-comparison-for-woocommerce")}
      badge={<ProBadge />}
      description={__(
        "Compares the product with similar ones, right on the product page.",
        "product-comparison-for-woocommerce",
      )}
    >
      <SwitchSetting
        path="quick_table.enabled"
        pro
        title={__(
          "Show on product pages",
          "product-comparison-for-woocommerce",
        )}
        description={__(
          "Uses your table rows and design. Only products that can be compared are shown.",
          "product-comparison-for-woocommerce",
        )}
      />
      {enabled && IS_PRO && (
        <>
          <ChoiceSetting
            path="quick_table.position"
            options={QUICK_POSITIONS}
            title={__("Position", "product-comparison-for-woocommerce")}
            description={__(
              "Block themes and page builders: use the [pcfw_quick_table] shortcode where you want it.",
              "product-comparison-for-woocommerce",
            )}
          />
          <ChoiceSetting
            path="quick_table.source"
            options={QUICK_SOURCES}
            title={__("Compare with", "product-comparison-for-woocommerce")}
            description={__(
              "Hand-picked: Product data › Linked Products › Compare with. Products without picks use related products.",
              "product-comparison-for-woocommerce",
            )}
          />
          <StepperSetting
            path="quick_table.limit"
            title={__("Other products", "product-comparison-for-woocommerce")}
            description={__(
              "Shown next to the product itself.",
              "product-comparison-for-woocommerce",
            )}
            min={1}
            max={5}
          />
          <SwitchSetting
            path="quick_table.only_differences"
            title={__(
              "Start with “only differences” on",
              "product-comparison-for-woocommerce",
            )}
            description={__(
              "Keeps the table short. Shoppers can switch it off.",
              "product-comparison-for-woocommerce",
            )}
          />
          <div className="ino:py-4">
            <TextSetting
              path="quick_table.title"
              label={__("Title", "product-comparison-for-woocommerce")}
              placeholder={__(
                "Compare with similar",
                "product-comparison-for-woocommerce",
              )}
            />
          </div>
        </>
      )}
    </SettingsCard>
  );
};

export default QuickTableSection;