/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio, TweakSlider */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#00408F",
  "accentColor": "#C8A24B",
  "density": "comfortable",
  "radius": 2,
  "theme": "light"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--primary', t.primaryColor);
    r.setProperty('--idpe-cobalt-800', t.primaryColor);
    r.setProperty('--accent', t.accentColor);
    r.setProperty('--idpe-accent-500', t.accentColor);
    r.setProperty('--idpe-brass-500', t.accentColor);
    r.setProperty('--r-sm', t.radius + 'px');
    document.documentElement.setAttribute('data-theme', t.theme);
    document.querySelectorAll('[data-theme-set]').forEach(b => {
      b.classList.toggle('is-active', b.dataset.themeSet === t.theme);
    });
    if (t.density === 'compact') {
      r.setProperty('--s-16', '40px');
      r.setProperty('--s-20', '56px');
      r.setProperty('--s-24', '64px');
    } else {
      r.setProperty('--s-16', '64px');
      r.setProperty('--s-20', '80px');
      r.setProperty('--s-24', '96px');
    }
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Cor primária">
        <TweakColor value={t.primaryColor} onChange={v => setTweak('primaryColor', v)}
          options={['#00408F','#003983','#00204F','#1F59A8']} />
      </TweakSection>
      <TweakSection title="Acento">
        <TweakColor value={t.accentColor} onChange={v => setTweak('accentColor', v)}
          options={['#C8A24B','#A98330','#003075','#2E7D5B']} />
      </TweakSection>
      <TweakSection title="Tema">
        <TweakRadio value={t.theme} onChange={v => setTweak('theme', v)}
          options={[{value:'light',label:'Light'},{value:'dark',label:'Dark'}]} />
      </TweakSection>
      <TweakSection title="Densidade">
        <TweakRadio value={t.density} onChange={v => setTweak('density', v)}
          options={[{value:'comfortable',label:'Confortável'},{value:'compact',label:'Compacto'}]} />
      </TweakSection>
      <TweakSection title="Raio das bordas">
        <TweakSlider value={t.radius} onChange={v => setTweak('radius', v)} min={0} max={12} step={1} suffix="px" />
      </TweakSection>
    </TweaksPanel>
  );
}

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