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

const { useEffect } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "warm",
  "showCmsFields": false
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(DEFAULTS);

  // theme
  useEffect(() => {
    if (t.theme === "forest-dark") {
      document.body.setAttribute("data-theme", "forest-dark");
    } else {
      document.body.removeAttribute("data-theme");
    }
  }, [t.theme]);

  // CMS field highlight
  useEffect(() => {
    if (window.setCmsHighlight) window.setCmsHighlight(t.showCmsFields);
  }, [t.showCmsFields]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="CMS preview">
        <TweakToggle
          label="Show CMS field indicators"
          value={t.showCmsFields}
          onChange={(v) => setTweak("showCmsFields", v)}
        />
      </TweakSection>

      <TweakSection title="Theme">
        <TweakRadio
          label="Mode"
          value={t.theme}
          options={[
            { value: "warm", label: "Light" },
            { value: "forest-dark", label: "Dark" },
          ]}
          onChange={(v) => setTweak("theme", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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