/* Tweaks panel for the Olga Guryeva site.
   Applies changes to the vanilla page via window.__site* helpers. */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#e8ff45",
  "motion": "mid",
  "grain": false
}/*EDITMODE-END*/;

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

  useEffect(() => { window.__siteAccent && window.__siteAccent(t.accent); }, [t.accent]);
  useEffect(() => { window.__siteMotion && window.__siteMotion(t.motion); }, [t.motion]);
  useEffect(() => { window.__siteGrain && window.__siteGrain(t.grain); }, [t.grain]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Акцент" />
      <TweakColor
        label="Цвет"
        value={t.accent}
        options={["#e8ff45", "#ff5a3c", "#4d7cff", "#19d3a2"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Движение" />
      <TweakRadio
        label="Анимации"
        value={t.motion}
        options={[{ value: "low", label: "Спокойно" }, { value: "mid", label: "Живо" }]}
        onChange={(v) => setTweak("motion", v)}
      />
      <TweakToggle
        label="Пленочное зерно"
        value={t.grain}
        onChange={(v) => setTweak("grain", v)}
      />
    </TweaksPanel>
  );
}

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