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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "lime",
  "density": "spacious",
  "mascot": true,
  "headline": "punchy"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-palette", t.palette);
    root.setAttribute("data-density", t.density);
    root.setAttribute("data-mascot", t.mascot ? "on" : "off");
    root.setAttribute("data-headline", t.headline);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakRadio
        label="Theme"
        value={t.palette}
        onChange={(v) => setTweak("palette", v)}
        options={[
          { value: "lime", label: "Ink+Lime" },
          { value: "ember", label: "Ember" },
          { value: "midnight", label: "Night" },
        ]}
      />
      <TweakSection label="Copy" />
      <TweakRadio
        label="Headline"
        value={t.headline}
        onChange={(v) => setTweak("headline", v)}
        options={[
          { value: "punchy", label: "Punchy" },
          { value: "warm", label: "Warm" },
          { value: "blunt", label: "Blunt" },
        ]}
      />
      <TweakSection label="Layout" />
      <TweakRadio
        label="Density"
        value={t.density}
        onChange={(v) => setTweak("density", v)}
        options={[
          { value: "spacious", label: "Spacious" },
          { value: "compact", label: "Compact" },
        ]}
      />
      <TweakToggle
        label="Gorilla mascot"
        value={t.mascot}
        onChange={(v) => setTweak("mascot", v)}
      />
    </TweaksPanel>
  );
}

const tweaksRoot = document.getElementById("tweaks-root");
if (tweaksRoot) {
  ReactDOM.createRoot(tweaksRoot).render(<GorillaTweaks />);
}