/* global React, ReactDOM */
const { useEffect } = React;

const PALETTE_IDS = ['lime', 'cobalt', 'acid', 'carbon'];
const PALETTE_LABELS = { lime: 'Lime', cobalt: 'Cobalt', acid: 'Acid', carbon: 'Carbon' };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "lime",
  "showRails": true,
  "showCounter": true
}/*EDITMODE-END*/;

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

  useEffect(() => {
    document.body.classList.remove(...PALETTE_IDS.map(p => 'palette-' + p));
    document.body.classList.add('palette-' + t.palette);
  }, [t.palette]);

  useEffect(() => {
    document.querySelectorAll('.rail').forEach(r => {
      r.style.display = t.showRails ? '' : 'none';
    });
  }, [t.showRails]);

  useEffect(() => {
    let css = document.getElementById('counter-toggle-css');
    if (!css) {
      css = document.createElement('style');
      css.id = 'counter-toggle-css';
      document.head.appendChild(css);
    }
    css.textContent = t.showCounter ? '' : `deck-stage::part(slide-counter){display:none!important;}`;
  }, [t.showCounter]);

  const { TweaksPanel, TweakSection, TweakRadio, TweakToggle } = window;

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Paleta">
        <TweakRadio
          label="Sistema"
          value={t.palette}
          options={PALETTE_IDS.map(id => ({ value: id, label: PALETTE_LABELS[id] }))}
          onChange={(v) => setTweak('palette', v)}
        />
      </TweakSection>
      <TweakSection label="Chrome">
        <TweakToggle label="Rails (header/footer)" value={t.showRails} onChange={(v) => setTweak('showRails', v)} />
        <TweakToggle label="Contador de slide"     value={t.showCounter} onChange={(v) => setTweak('showCounter', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

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