/* tweaks-app.jsx — Tweaks for olm.health */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "rouge",
  "olmMotif": "side",
  "showOlm": true
}/*EDITMODE-END*/;

function OlmTweaks() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply accent to body
  React.useEffect(() => {
    document.body.dataset.accent = tweaks.accent;
  }, [tweaks.accent]);

  // Toggle hero olm motif
  React.useEffect(() => {
    const heroPlate = document.querySelector('.hero-plate svg use');
    if (heroPlate) heroPlate.setAttribute('href', '#sym-olm-' + tweaks.olmMotif);
    document.querySelectorAll('.hero-plate, .plate-caption').forEach(el => {
      el.style.display = tweaks.showOlm ? '' : 'none';
    });
  }, [tweaks.olmMotif, tweaks.showOlm]);

  return (
    <TweaksPanel title="The editor's desk">
      <TweakSection title="Accent ink">
        <TweakRadio
          value={tweaks.accent}
          onChange={v => setTweak('accent', v)}
          options={[
            { value: 'rouge', label: 'Rouge' },
            { value: 'plum', label: 'Plum' },
            { value: 'estonian', label: 'Navy' },
          ]}
        />
      </TweakSection>
      <TweakSection title="Olm engraving">
        <TweakToggle
          label="Show on cover"
          value={tweaks.showOlm}
          onChange={v => setTweak('showOlm', v)}
        />
        <TweakRadio
          value={tweaks.olmMotif}
          onChange={v => setTweak('olmMotif', v)}
          options={[
            { value: 'side', label: 'Side view' },
            { value: 'frill', label: 'Head' },
            { value: 'coil', label: 'Coiled' },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const tweakRoot = document.createElement('div');
document.body.appendChild(tweakRoot);
ReactDOM.createRoot(tweakRoot).render(<OlmTweaks/>);