/* global React, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle */

const VP_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "gold",
  "background": "noir",
  "displayItalic": true,
  "showOrbs": true
}/*EDITMODE-END*/;

function VivoTweaks() {
  const [t, setTweak] = useTweaks(VP_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    // Accent
    if (t.accent === 'gold') {
      root.style.setProperty('--vp-gold', '#2F855A');
      root.style.setProperty('--vp-gold-light', '#4FB07A');
    } else if (t.accent === 'green') {
      root.style.setProperty('--vp-gold', '#2F855A');
      root.style.setProperty('--vp-gold-light', '#3A8A6A');
    } else if (t.accent === 'bordeaux') {
      root.style.setProperty('--vp-gold', '#64746B');
      root.style.setProperty('--vp-gold-light', '#8A9A90');
    }

    // Background
    if (t.background === 'noir') {
      root.style.setProperty('--vp-black', '#0A0F0D');
      root.style.setProperty('--vp-black-2', '#0E1512');
    } else if (t.background === 'bordeaux') {
      root.style.setProperty('--vp-black', '#1A0A0F');
      root.style.setProperty('--vp-black-2', '#220C13');
    } else if (t.background === 'sapin') {
      root.style.setProperty('--vp-black', '#08120E');
      root.style.setProperty('--vp-black-2', '#0C1A14');
    }

    // Orbs
    document.querySelectorAll('.orb').forEach(o => {
      o.style.display = t.showOrbs ? '' : 'none';
    });

    // Italic display
    document.querySelectorAll('.display-italic').forEach(el => {
      el.style.fontStyle = t.displayItalic ? 'italic' : 'normal';
      el.style.fontVariationSettings = t.displayItalic
        ? '"SOFT" 100, "WONK" 1, "opsz" 144'
        : '"SOFT" 30, "WONK" 0, "opsz" 144';
    });
  }, [t]);

  return (
    <TweaksPanel title="Tweaks · Vivo">
      <TweakSection label="Identité visuelle" />
      <TweakRadio
        label="Accent dominant"
        value={t.accent}
        options={['gold', 'green', 'bordeaux']}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakRadio
        label="Fond"
        value={t.background}
        options={['noir', 'bordeaux', 'sapin']}
        onChange={(v) => setTweak('background', v)}
      />
      <TweakSection label="Style" />
      <TweakToggle
        label="Italique editorial"
        value={t.displayItalic}
        onChange={(v) => setTweak('displayItalic', v)}
      />
      <TweakToggle
        label="Orbes lumineuses"
        value={t.showOrbs}
        onChange={(v) => setTweak('showOrbs', v)}
      />
    </TweaksPanel>
  );
}

window.VivoTweaks = VivoTweaks;