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 { useSetting } from "@/hooks/useSettings";
import { __ } from "@wordpress/i18n";
import ShareNetworksSetting from "../components/ShareNetworksSetting";
import { SHARE_MODES } from "../constants";

const EXAMPLES = {
  ids: "?compare=12,34,56",
  short: "?pcfw=aB3xY9",
};

/**
 * General › Sharing: share link, native share, print and link format.
 */
const SharingSection = () => {
  const [mode] = useSetting("share.mode", "ids");
  const [enabled] = useSetting("share.enabled", true);

  return (
    <SettingsCard
      title={__("Sharing", "product-comparison-for-woocommerce")}
      description={__(
        "On by default, so a shared comparison always opens the same products.",
        "product-comparison-for-woocommerce",
      )}
    >
      <SwitchSetting
        path="share.enabled"
        title={__("Shareable link", "product-comparison-for-woocommerce")}
        description={__(
          "Adds a Share button to the popup and compare page.",
          "product-comparison-for-woocommerce",
        )}
      />
      {enabled && (
        <>
          <ShareNetworksSetting />
          <div className="ino:border-t ino:border-border/70 ino:py-4">
            <TextSetting
              path="share.title"
              label={__("Share title", "product-comparison-for-woocommerce")}
              placeholder={__(
                /* translators: {products} is a placeholder; keep it as it is. */
                "Compare: {products}",
                "product-comparison-for-woocommerce",
              )}
            />
            <p className="ino:mt-1.5 ino:mb-0 ino:text-[13px] ino:text-muted-foreground">
              {__(
                /* translators: {products} and {site} are placeholders; keep them as they are. */
                "Text sent with the link (post text, email subject). {products} becomes “Hoodie vs Cap”, {site} your site name.",
                "product-comparison-for-woocommerce",
              )}
            </p>
          </div>
        </>
      )}
      <SwitchSetting
        path="share.native_share"
        title={__(
          "Native share on phones",
          "product-comparison-for-woocommerce",
        )}
        description={__(
          "Opens the phone's share sheet.",
          "product-comparison-for-woocommerce",
        )}
      />
      <SwitchSetting
        path="share.print"
        title={__("Print button", "product-comparison-for-woocommerce")}
        description={__(
          "Uses a clean print layout.",
          "product-comparison-for-woocommerce",
        )}
      />
      <ChoiceSetting
        path="share.mode"
        title={__("Link format", "product-comparison-for-woocommerce")}
        description={`/compare/${EXAMPLES[mode] ?? EXAMPLES.ids}`}
        options={SHARE_MODES}
      />
    </SettingsCard>
  );
};

export default SharingSection;