const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "tone": "indigo",
  "energy": "quiet",
  "contributions": "list"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.body.classList.remove("tone-indigo", "tone-oxblood", "tone-ink");
    document.body.classList.add("tone-" + t.tone);
  }, [t.tone]);

  React.useEffect(() => {
    document.body.classList.remove("art-quiet", "art-bold");
    document.body.classList.add("art-" + t.energy);
  }, [t.energy]);

  React.useEffect(() => {
    document.body.classList.toggle("cc-timeline", t.contributions === "timeline");
  }, [t.contributions]);

  return (
    <TweaksPanel>
      <TweakSection label="Mood" />
      <TweakRadio label="Accent tone" value={t.tone} options={["indigo", "oxblood", "ink"]}
                  onChange={(v) => setTweak("tone", v)} />
      <TweakRadio label="Artwork energy" value={t.energy} options={["quiet", "bold"]}
                  onChange={(v) => setTweak("energy", v)} />
      <TweakSection label="Core Contributions" />
      <TweakRadio label="Layout" value={t.contributions} options={["list", "timeline"]}
                  onChange={(v) => setTweak("contributions", v)} />
    </TweaksPanel>
  );
}

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