import ColorGroup from "@/components/settings/ColorGroup";
import RangeSetting from "@/components/settings/RangeSetting";
import SettingRow from "@/components/settings/SettingRow";
import SwitchSetting from "@/components/settings/SwitchSetting";
import { Switch } from "@/components/ui/switch";
import { useDesign } from "@/hooks/useSettings";
import { IS_PRO } from "@/lib/env";
import { __ } from "@wordpress/i18n";

const TITLE = __(
  "Mobile colors and layout options",
  "product-comparison-for-woocommerce",
);
const DESCRIPTION = __(
  "Separate colors, card spacing and label width for phones.",
  "product-comparison-for-woocommerce",
);

/**
 * Phones and tablets › mobile-only styling (Pro, `pcfw_design.mobile`):
 * a locked row on Free; with Pro, the switch and its options.
 */
const MobileStyle = () => {
  const [enabled] = useDesign("mobile.enabled", false);

  if (!IS_PRO) {
    return (
      <SettingRow
        id="pcfw-mobile-style"
        title={TITLE}
        description={DESCRIPTION}
        pro
        locked
      >
        <Switch aria-labelledby="pcfw-mobile-style" checked={false} disabled />
      </SettingRow>
    );
  }

  return (
    <>
      <SwitchSetting
        source="design"
        path="mobile.enabled"
        pro
        title={TITLE}
        description={DESCRIPTION}
      />
      {enabled && (
        <>
          <ColorGroup
            pro
            title={__("Phone colors", "product-comparison-for-woocommerce")}
            description={__(
              "Used on screens up to 600 px wide.",
              "product-comparison-for-woocommerce",
            )}
            items={[
              {
                path: "mobile.surface",
                label: __("Background", "product-comparison-for-woocommerce"),
              },
              {
                path: "mobile.text",
                label: __("Text", "product-comparison-for-woocommerce"),
              },
              {
                path: "mobile.line",
                label: __("Lines", "product-comparison-for-woocommerce"),
              },
            ]}
          />
          <RangeSetting
            source="design"
            path="mobile.card_gap"
            pro
            min={4}
            max={32}
            title={__("Card spacing", "product-comparison-for-woocommerce")}
            description={__(
              "Space between swipe cards.",
              "product-comparison-for-woocommerce",
            )}
          />
          <RangeSetting
            source="design"
            path="mobile.label_width"
            pro
            min={72}
            max={200}
            title={__("Label width", "product-comparison-for-woocommerce")}
            description={__(
              "Label column when phones show the scrolling table.",
              "product-comparison-for-woocommerce",
            )}
          />
        </>
      )}
    </>
  );
};

export default MobileStyle;