/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakColor */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "mono": false,
  "density": "regular",
  "accent": "#00ff9c"
}/*EDITMODE-END*/;

function App() {
  const [t, setT] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-theme", t.theme);
    root.setAttribute("data-mono", String(t.mono));
    root.setAttribute("data-density", t.density);
    if (!t.mono) {
      root.style.setProperty("--accent", t.accent);
    } else {
      root.style.removeProperty("--accent");
    }
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="theme">
        <TweakRadio
          label="mode"
          value={t.theme}
          onChange={(v) => setT("theme", v)}
          options={[
            { value: "dark", label: "dark" },
            { value: "light", label: "light" },
          ]}
        />
        <TweakToggle
          label="mono"
          checked={t.mono}
          onChange={(v) => setT("mono", v)}
        />
        <TweakColor
          label="accent"
          value={t.accent}
          onChange={(v) => setT("accent", v)}
          disabled={t.mono}
        />
      </TweakSection>
      <TweakSection title="layout">
        <TweakRadio
          label="density"
          value={t.density}
          onChange={(v) => setT("density", v)}
          options={[
            { value: "comfy", label: "comfy" },
            { value: "regular", label: "regular" },
            { value: "dense", label: "dense" },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const root = document.createElement("div");
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<App />);