// Tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "#f2562a",
  "typo": "editorial",
  "density": "normal"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = ["#f2562a", "#1f5dd6", "#1f8a5b", "#1a1a1d"];

const Tweaks = () => {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // Apply on every render synchronously so initial paint is correct
  React.useLayoutEffect(() => {
    document.body.dataset.theme = t.theme;
    document.body.dataset.typo = t.typo;
    document.body.dataset.density = t.density;
    document.documentElement.style.setProperty("--accent", t.accent);
    // also set a darker variant
    document.documentElement.style.setProperty("--accent-2", t.accent);
  }, [t.theme, t.typo, t.density, t.accent]);

  return (
    <window.TweaksPanel title="Tweaks" defaultOpen={false}>
      <window.TweakSection title="Theme">
        <window.TweakRadio
          label="Mode"
          value={t.theme}
          options={[{value:"light", label:"Light"}, {value:"dark", label:"Dark"}]}
          onChange={(v) => setTweak("theme", v)}
        />
      </window.TweakSection>
      <window.TweakSection title="Accent">
        <window.TweakColor
          label="Color"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak("accent", v)}
        />
      </window.TweakSection>
      <window.TweakSection title="Typography">
        <window.TweakRadio
          label="Style"
          value={t.typo}
          options={[{value:"editorial", label:"Editorial"}, {value:"brutal", label:"Brutal"}]}
          onChange={(v) => setTweak("typo", v)}
        />
      </window.TweakSection>
      <window.TweakSection title="Density">
        <window.TweakRadio
          label="Spacing"
          value={t.density}
          options={[{value:"compact", label:"Compact"}, {value:"normal", label:"Normal"}, {value:"airy", label:"Airy"}]}
          onChange={(v) => setTweak("density", v)}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
};
window.Tweaks = Tweaks;