/* Exorth tweaks: scheme switcher + content tweaks. Loaded after tweaks-panel.jsx */

const EXORTH_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "scheme": "parchment",
  "showServerStatus": true,
  "newsCount": 6
}/*EDITMODE-END*/;

function ExorthTweaks() {
  const [tweaks, setTweak] = window.useTweaks(EXORTH_TWEAK_DEFAULTS);

  // Apply scheme live
  React.useEffect(() => {
    window.applyScheme(tweaks.scheme);
  }, [tweaks.scheme]);

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection title="Color scheme">
        <window.TweakRadio
          label="Theme"
          value={tweaks.scheme}
          options={[
            { value: 'parchment', label: 'Parchment' },
            { value: 'ember',     label: 'Ember' },
            { value: 'emerald',   label: 'Emerald' },
            { value: 'frost',     label: 'Frost' },
          ]}
          onChange={(v) => setTweak('scheme', v)}
        />
      </window.TweakSection>

      <window.TweakSection title="Homepage">
        <window.TweakToggle
          label="Show server status panel"
          value={tweaks.showServerStatus}
          onChange={(v) => setTweak('showServerStatus', v)}
        />
        <window.TweakSlider
          label="News items"
          min={3} max={10} step={1}
          value={tweaks.newsCount}
          onChange={(v) => setTweak('newsCount', v)}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

const tweaksRoot = document.getElementById('tweaks-root');
if (tweaksRoot) {
  ReactDOM.createRoot(tweaksRoot).render(<ExorthTweaks/>);
}