/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#C4703F", "#A8552E"],
  "headingFont": "Recoleta*",
  "animations": true
}/*EDITMODE-END*/;

const HEADING_FONTS = {
  "Recoleta*": '"Fraunces", "DM Serif Display", Georgia, serif',
  "Modern": '"Hanken Grotesk", system-ui, sans-serif',
  "Playful": '"Space Mono", ui-monospace, monospace'
};

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    const accent = Array.isArray(t.accent) ? t.accent : [t.accent, t.accent];
    root.style.setProperty("--terra", accent[0]);
    root.style.setProperty("--terra-deep", accent[1] || accent[0]);
  }, [t.accent]);

  React.useEffect(() => {
    document.documentElement.style.setProperty(
      "--display",
      HEADING_FONTS[t.headingFont] || HEADING_FONTS["Recoleta*"]
    );
    // Modern uses a heavier weight to read as a display face
    document.querySelectorAll("h1,h2,h3").forEach((h) => {
      h.style.fontWeight = t.headingFont === "Modern" ? "700" : "";
      h.style.letterSpacing = t.headingFont === "Playful" ? "-.03em" : "";
    });
  }, [t.headingFont]);

  React.useEffect(() => {
    document.body.setAttribute("data-anim", t.animations ? "on" : "off");
  }, [t.animations]);

  return (
    <TweaksPanel>
      <TweakSection label="Brand color" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={[
          ["#C4703F", "#A8552E"],
          ["#5C8374", "#3E6354"],
          ["#2E6FA8", "#225685"],
          ["#B0543F", "#8C3E2E"]
        ]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Typography" />
      <TweakRadio
        label="Headings"
        value={t.headingFont}
        options={["Recoleta*", "Modern", "Playful"]}
        onChange={(v) => setTweak("headingFont", v)}
      />
      <TweakSection label="Motion" />
      <TweakToggle
        label="Animations"
        value={t.animations}
        onChange={(v) => setTweak("animations", v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<TweaksApp />);