// Tweaks panel for the Tiny Tomato Games site
const { useTweaks, TweaksPanel, TweakSection, TweakSlider, TweakColor, TweakRadio, TweakToggle } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E63A2E",
  "hero": "centered",
  "glow": 16,
  "intro": true,
  "radius": 10
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--accent', t.accent);
    r.style.setProperty('--radius', t.radius + 'px');
    r.style.setProperty('--glow', (t.glow / 100).toFixed(2));
    r.setAttribute('data-hero', t.hero);
    const intro = document.getElementById('intro');
    if (intro) intro.setAttribute('data-enabled', t.intro ? 'true' : 'false');
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand"></TweakSection>
      <TweakColor label="Accent" value={t.accent} options={['#E63A2E', '#F2552C', '#C9282D']} onChange={(v) => setTweak('accent', v)}></TweakColor>

      <TweakSection label="Hero composition"></TweakSection>
      <TweakRadio label="Layout" value={t.hero} options={[{ label: 'Centered', value: 'centered' }, { label: 'Cinematic', value: 'cinematic' }, { label: 'Minimal', value: 'minimal' }]} onChange={(v) => setTweak('hero', v)}></TweakRadio>
      <TweakSlider label="Glow" value={t.glow} min={0} max={32} step={1} unit="%" onChange={(v) => setTweak('glow', v)}></TweakSlider>

      <TweakSection label="Motion & surface"></TweakSection>
      <TweakToggle label="Intro on load" value={t.intro} onChange={(v) => setTweak('intro', v)}></TweakToggle>
      <TweakRadio label="Corner radius" value={t.radius} options={[6, 10, 16]} onChange={(v) => setTweak('radius', v)}></TweakRadio>
    </TweaksPanel>
  );
}

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