// Tweaks panel for Opulentdominion. Loaded with type="text/babel".
// Uses the shared tweaks_panel.jsx starter for the panel chrome.

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "#8a3d1f",
  "displayFont": "\"Newsreader\", Georgia, serif"
}/*EDITMODE-END*/;

const ACCENTS = ['#8a3d1f', '#1c3b6e', '#2d4a2b', '#6d4c1f', '#1a1a1a'];

const FONT_OPTIONS = [
  { label: 'Newsreader',    value: '"Newsreader", Georgia, serif' },
  { label: 'Source Serif',  value: '"Source Serif 4", Georgia, serif' },
  { label: 'Cormorant',     value: '"Cormorant Garamond", Georgia, serif' },
];

function applyToPage(tweaks) {
  window.postMessage({ type: '__od_apply_tweaks', tweaks }, '*');
}

function OpulentTweaks() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  useEffect(() => { applyToPage(t); }, [t]);

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection label="Theme" />
      <window.TweakRadio
        label="Mode"
        value={t.theme}
        options={[
          { label: 'Light', value: 'light' },
          { label: 'Dark',  value: 'dark'  },
        ]}
        onChange={(v) => setTweak('theme', v)}
      />

      <window.TweakSection label="Accent" />
      <window.TweakColor
        label="Color"
        value={t.accent}
        options={ACCENTS}
        onChange={(v) => setTweak('accent', v)}
      />

      <window.TweakSection label="Typography" />
      <window.TweakSelect
        label="Display serif"
        value={t.displayFont}
        options={FONT_OPTIONS}
        onChange={(v) => setTweak('displayFont', v)}
      />
    </window.TweaksPanel>
  );
}

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