/* Tweaks panel for the website */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "cobalt",
  "density": "comfortable",
  "showNotify": true,
  "heroVariant": "animated"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.documentElement.dataset.theme = t.theme;
    document.documentElement.dataset.accent = t.accent;
    document.documentElement.dataset.density = t.density;
    const notify = document.getElementById('notify-section');
    if(notify) notify.style.display = t.showNotify ? '' : 'none';

    const fig = document.getElementById('hero-fig');
    if(fig){
      if(t.heroVariant === 'none'){
        fig.style.display = 'none';
      } else {
        fig.style.display = '';
        fig.querySelectorAll('.anim-draw, .pulse-dot, .fade-in').forEach(el => {
          if(t.heroVariant === 'static'){
            el.style.animation = 'none';
            el.style.strokeDashoffset = '0';
            el.style.opacity = '1';
          }
        });
      }
    }
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Appearance">
        <TweakRadio label="Theme" value={t.theme} options={['light','dark']} onChange={v => setT('theme', v)} />
        <TweakRadio label="Accent" value={t.accent} options={['cobalt','signal','ink']} onChange={v => setT('accent', v)} />
        <TweakRadio label="Density" value={t.density} options={['comfortable','compact']} onChange={v => setT('density', v)} />
      </TweakSection>
      <TweakSection title="Hero">
        <TweakRadio label="Figure" value={t.heroVariant} options={['animated','static','none']} onChange={v => setT('heroVariant', v)} />
      </TweakSection>
      <TweakSection title="Sections">
        <TweakToggle label="Show signup CTA" value={t.showNotify} onChange={v => setT('showNotify', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

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