/* Case Study — Tweaks panel */

const CS_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "commentary": "on",
  "opnote": "on",
  "density": "regular",
  "accent": "#A04B2A"
}/*EDITMODE-END*/;

function CaseStudyTweaks() {
  const [t, setTweak] = useTweaks(CS_TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.body.dataset.commentary = t.commentary;
    document.body.dataset.opnote = t.opnote;
    document.body.dataset.density = t.density;
    document.documentElement.style.setProperty('--beam', t.accent);
  }, [t.commentary, t.opnote, t.density, t.accent]);

  return (
    <TweaksPanel>
      <TweakSection label="Sections" />
      <TweakToggle
        label="Surgeon's Note"
        value={t.commentary === 'on'}
        onChange={(v) => setTweak('commentary', v ? 'on' : 'off')}
      />
      <TweakToggle
        label="Op-note Dossier"
        value={t.opnote === 'on'}
        onChange={(v) => setTweak('opnote', v ? 'on' : 'off')}
      />

      <TweakSection label="Treatment" />
      <TweakRadio
        label="Density"
        value={t.density}
        options={['compact', 'regular', 'loose']}
        onChange={(v) => setTweak('density', v)}
      />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={['#A04B2A', '#C8A266', '#7C3520', '#3B5F8A']}
        onChange={(v) => setTweak('accent', v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(
  (function () {
    const el = document.createElement('div');
    el.id = 'tweaks-root';
    document.body.appendChild(el);
    return el;
  })()
).render(<CaseStudyTweaks />);