/* global React, window */
// Shampooch — Tweaks panel
const { useEffect: useEffectT } = React;

function ShampoochTweaks() {
  const DEFAULTS = /*EDITMODE-BEGIN*/{
    "palette": "van",
    "theme": "default",
    "displayFont": "Bricolage Grotesque",
    "bodyFont": "Manrope",
    "heroStyle": "collage",
    "showRibbon": true,
    "trustStrip": "marquee"
  }/*EDITMODE-END*/;
  const [t, setTweak] = window.useTweaks(DEFAULTS);

  // Apply tweaks to DOM
  useEffectT(() => {
    const root = document.documentElement;
    const body = document.body;

    // palette swap
    const palettes = {
      van:    { pink: "#E91885", pinkDeep: "#C30B6E", pinkSoft: "#FDE7F1", yellow: "#FFD23F", yellowSoft: "#FFF3C6" },
      cherry: { pink: "#FF3A6E", pinkDeep: "#C8004A", pinkSoft: "#FFE0E9", yellow: "#FFB935", yellowSoft: "#FFE8C2" },
      candy:  { pink: "#FF66C4", pinkDeep: "#C2007F", pinkSoft: "#FFE3F4", yellow: "#FFE066", yellowSoft: "#FFF7CC" },
      mute:   { pink: "#D85A8A", pinkDeep: "#A6346A", pinkSoft: "#F6E0EA", yellow: "#E8C260", yellowSoft: "#F8ECC2" },
    };
    const p = palettes[t.palette] || palettes.van;
    root.style.setProperty("--pooch-pink", p.pink);
    root.style.setProperty("--pooch-pink-deep", p.pinkDeep);
    root.style.setProperty("--pooch-pink-soft", p.pinkSoft);
    root.style.setProperty("--pooch-yellow", p.yellow);
    root.style.setProperty("--pooch-yellow-soft", p.yellowSoft);

    // theme bg
    body.dataset.theme = t.theme === "default" ? "" : t.theme;

    // fonts
    root.style.setProperty("--font-display", `"${t.displayFont}", system-ui, sans-serif`);
    root.style.setProperty("--font-body", `"${t.bodyFont}", system-ui, sans-serif`);
  }, [t]);

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection title="Palette">
        <window.TweakColor
          label="Brand palette"
          value={t.palette}
          onChange={v => setTweak("palette", v)}
          options={[
            ["#E91885", "#FFD23F", "#FBF5EC"],
            ["#FF3A6E", "#FFB935", "#FBF5EC"],
            ["#FF66C4", "#FFE066", "#FBF5EC"],
            ["#D85A8A", "#E8C260", "#FBF5EC"],
          ]}
        />
        <window.TweakRadio
          label="Page background"
          value={t.theme}
          onChange={v => setTweak("theme", v)}
          options={[
            { value: "default", label: "Cream" },
            { value: "hot", label: "Blush" },
            { value: "sunny", label: "Sun" },
            { value: "ink", label: "Ink" },
          ]}
        />
      </window.TweakSection>
      <window.TweakSection title="Typography">
        <window.TweakSelect
          label="Display font"
          value={t.displayFont}
          onChange={v => setTweak("displayFont", v)}
          options={["Bricolage Grotesque", "Fraunces", "Recoleta", "Caprasimo", "DM Serif Display", "Quicksand"]}
        />
        <window.TweakSelect
          label="Body font"
          value={t.bodyFont}
          onChange={v => setTweak("bodyFont", v)}
          options={["Manrope", "Inter", "DM Sans", "Nunito", "Work Sans"]}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

window.ShampoochTweaks = ShampoochTweaks;