import ChoiceSetting from "@/components/settings/ChoiceSetting";
import ColorGroup from "@/components/settings/ColorGroup";
import RangeSetting from "@/components/settings/RangeSetting";
import SettingsCard from "@/components/settings/SettingsCard";
import SwitchSetting from "@/components/settings/SwitchSetting";
import { Button } from "@/components/ui/button";
import { useDesign } from "@/hooks/useSettings";
import { DEFAULTS, THEME_NAME } from "@/lib/env";
import { __, sprintf } from "@wordpress/i18n";
import { COLOR_GROUPS } from "../colorGroups";
import ContrastWarning from "../components/ContrastWarning";
import { FONTS, WEIGHTS } from "../constants";

/**
 * Buttons › Button style (`pcfw_design.button` and bar colours). Free:
 * theme switch, corner radius, normal colours. The rest is Pro.
 */
const ButtonStyleSection = () => {
  const [inherit] = useDesign("button.inherit_theme", true);
  const [, setButton] = useDesign("button");
  const [, setBar] = useDesign("bar");
  const defaults = DEFAULTS.design ?? {};

  const resetToTheme = () => {
    setButton({ ...defaults.button, inherit_theme: true });
    setBar({ ...defaults.bar });
  };

  return (
    <SettingsCard
      title={__("Button style", "product-comparison-for-woocommerce")}
      description={__(
        "Font, shape and every color of the Compare button, its icon and the compare bar.",
        "product-comparison-for-woocommerce",
      )}
      badge={
        !inherit && (
          <Button
            variant="outline"
            size="sm"
            className="ino:ml-auto"
            onClick={resetToTheme}
          >
            {__("Reset to theme", "product-comparison-for-woocommerce")}
          </Button>
        )
      }
    >
      <SwitchSetting
        source="design"
        path="button.inherit_theme"
        title={__(
          "Use my theme’s button style",
          "product-comparison-for-woocommerce",
        )}
        description={
          inherit
            ? sprintf(
                /* translators: %s: active theme name */
                __(
                  "On: the button uses %s’s font, colors and shape. Turn off to customize everything.",
                  "product-comparison-for-woocommerce",
                ),
                THEME_NAME ||
                  __("your theme", "product-comparison-for-woocommerce"),
              )
            : __(
                "Off: the custom font, shape and colors below are used.",
                "product-comparison-for-woocommerce",
              )
        }
      />
      {!inherit && (
        <>
          <ChoiceSetting
            source="design"
            path="button.font"
            pro
            options={FONTS}
            title={__("Font", "product-comparison-for-woocommerce")}
          />
          <ChoiceSetting
            source="design"
            path="button.font_weight"
            pro
            options={WEIGHTS}
            title={__("Font weight", "product-comparison-for-woocommerce")}
          />
          <RangeSetting
            source="design"
            path="button.font_size"
            pro
            min={12}
            max={18}
            title={__("Font size", "product-comparison-for-woocommerce")}
          />
          <RangeSetting
            source="design"
            path="button.radius"
            min={0}
            max={24}
            title={__("Corner radius", "product-comparison-for-woocommerce")}
            format={(v) =>
              v >= 24
                ? __("Pill", "product-comparison-for-woocommerce")
                : `${v} px`
            }
          />
          {COLOR_GROUPS.map(({ key, ...group }) => (
            <ColorGroup key={key} {...group} />
          ))}
          <ContrastWarning />
        </>
      )}
    </SettingsCard>
  );
};

export default ButtonStyleSection;