/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakSlider */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "brown",
  "density": "default",
  "calm": false,
  "dark": false
}/*EDITMODE-END*/;

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

  useEffect(() => {
    const b = document.body;
    b.classList.toggle('dark', !!tweaks.dark);
    b.classList.toggle('calm', !!tweaks.calm);
    b.classList.toggle('compact', tweaks.density === 'compact');

    // Theme: change the cardinal accent to alt palettes
    const root = document.documentElement;
    if (tweaks.theme === 'cardinal') {
      root.style.setProperty('--cardinal', '#C00404');
      root.style.setProperty('--seal', '#4E3629');
    } else if (tweaks.theme === 'cream') {
      root.style.setProperty('--cardinal', '#9C2A2A');
      root.style.setProperty('--seal', '#3D2A20');
    } else { // brown
      root.style.setProperty('--cardinal', '#C00404');
      root.style.setProperty('--seal', '#4E3629');
    }
  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Theme">
        <TweakRadio
          label="Accent"
          value={tweaks.theme}
          onChange={(v) => setTweak('theme', v)}
          options={[
            { value: 'brown', label: 'Brown' },
            { value: 'cardinal', label: 'Cardinal' },
            { value: 'cream', label: 'Muted' },
          ]}
        />
        <TweakToggle
          label="Dark mode"
          value={tweaks.dark}
          onChange={(v) => setTweak('dark', v)}
        />
      </TweakSection>
      <TweakSection title="Layout & Motion">
        <TweakRadio
          label="Density"
          value={tweaks.density}
          onChange={(v) => setTweak('density', v)}
          options={[
            { value: 'default', label: 'Airy' },
            { value: 'compact', label: 'Compact' },
          ]}
        />
        <TweakToggle
          label="Calm mode"
          value={tweaks.calm}
          onChange={(v) => setTweak('calm', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const root = document.getElementById('tweaks-root');
if (root) ReactDOM.createRoot(root).render(<PortfolioTweaks />);