/* Tweaks app — mounts the panel and applies values to the vanilla page */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "glow": 1,
  "displayFont": "Anton",
  "bgDark": 1,
  "speed": 1,
  "counter": 14782
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--glow', t.glow);
    root.style.setProperty('--font-display', `'${t.displayFont}'`);
    root.style.setProperty('--display-weight',
      t.displayFont === 'Anton' ? 400 : t.displayFont === 'Oswald' ? 600 : 800);
    root.style.setProperty('--bg-bright', t.bgDark);
    if (window.BGE) {
      window.BGE.glow = t.glow;
      window.BGE.speed = t.speed;
      if (window.BGE.counterTarget !== t.counter) {
        window.BGE.counterTarget = t.counter;
        window.BGE.refreshCounter && window.BGE.refreshCounter();
      }
    }
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Atmosphere" />
      <TweakSlider label="Glow intensity" value={t.glow} min={0.4} max={1.8} step={0.05}
        onChange={(v) => setTweak('glow', v)} />
      <TweakSlider label="Background light" value={t.bgDark} min={0.55} max={1.5} step={0.05}
        onChange={(v) => setTweak('bgDark', v)} />
      <TweakSlider label="Motion speed" value={t.speed} min={0.4} max={1.8} step={0.1}
        onChange={(v) => setTweak('speed', v)} />
      <TweakSection label="Type" />
      <TweakRadio label="Display font" value={t.displayFont}
        options={['Anton', 'Oswald', 'Archivo']}
        onChange={(v) => setTweak('displayFont', v)} />
      <TweakSection label="Live data" />
      <TweakNumber label="Trees planted" value={t.counter} min={1000} max={9999999} step={1000}
        onChange={(v) => setTweak('counter', v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<App />);