import ChoiceSetting from "@/components/settings/ChoiceSetting";
import ColorGroup from "@/components/settings/ColorGroup";
import ContrastWarning from "@/components/settings/ContrastWarning";
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 { FONTS, WEIGHTS } from "../../buttons/constants";
import CustomCss from "../components/CustomCss";
import TemplatePicker from "../components/TemplatePicker";
import { TABLE_COLOR_GROUPS } from "../constants";

/**
 * Design › Look and feel (`pcfw_design`): template, theme style, font,
 * shape and colours of the table, and custom CSS.
 */
const LookSection = () => {
  const [inherit, setInherit] = useDesign("inherit_theme", true);
  const [table, setTable] = useDesign("table");
  const defaults = DEFAULTS.design ?? {};

  const resetToTheme = () => {
    setTable({ ...defaults.table });
    setInherit(true);
  };

  return (
    <SettingsCard
      title={__("Look and feel", "product-comparison-for-woocommerce")}
      description={__(
        "Template, font, shape and every color of the comparison table.",
        "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>
        )
      }
    >
      <TemplatePicker />
      <SwitchSetting
        source="design"
        path="inherit_theme"
        title={__(
          "Use my theme’s table style",
          "product-comparison-for-woocommerce",
        )}
        description={
          inherit
            ? sprintf(
                /* translators: %s: active theme name */
                __(
                  "On: the table uses %s’s font, colors and corners. 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 && table && (
        <>
          <ChoiceSetting
            source="design"
            path="table.font"
            pro
            options={FONTS}
            title={__("Font", "product-comparison-for-woocommerce")}
          />
          <ChoiceSetting
            source="design"
            path="table.label_weight"
            pro
            options={WEIGHTS}
            title={__("Label weight", "product-comparison-for-woocommerce")}
            description={__(
              "Row labels on the left",
              "product-comparison-for-woocommerce",
            )}
          />
          <RangeSetting
            source="design"
            path="table.font_size"
            pro
            min={12}
            max={18}
            title={__("Font size", "product-comparison-for-woocommerce")}
          />
          <RangeSetting
            source="design"
            path="table.radius"
            min={0}
            max={20}
            title={__("Corner radius", "product-comparison-for-woocommerce")}
          />
          {TABLE_COLOR_GROUPS.map(({ key, ...group }) => (
            <ColorGroup key={key} {...group} />
          ))}
          <ContrastWarning
            pairs={[
              [
                __(
                  "Add to cart text on its button",
                  "product-comparison-for-woocommerce",
                ),
                table.cart_text,
                table.cart_bg,
              ],
              [
                __(
                  "Table text on its background",
                  "product-comparison-for-woocommerce",
                ),
                table.text,
                table.surface,
              ],
              [
                __(
                  "Row labels on their background",
                  "product-comparison-for-woocommerce",
                ),
                table.label_text,
                table.label_bg,
              ],
            ]}
          />
        </>
      )}
      <CustomCss />
    </SettingsCard>
  );
};

export default LookSection;