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

function AppTweaks() {
  const defaults = (typeof window !== 'undefined' && window.TWEAK_DEFAULTS) || {
    heroVariant: 'portrait',
    typePairing: 'editorial',
    accentIntensity: 'default',
    showProgress: true,
  };
  const [tweaks, setTweak] = useTweaks(defaults);

  // Bridge tweaks to the vanilla site code
  useEffect(() => {
    window.dispatchEvent(new CustomEvent('duling:tweak', { detail: { all: tweaks } }));
  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero">
        <TweakRadio
          label="Variant"
          value={tweaks.heroVariant}
          onChange={(v) => setTweak('heroVariant', v)}
          options={[
            { value: 'portrait', label: 'Portrait' },
            { value: 'bars', label: 'Bar growth' },
            { value: 'quote', label: 'Pull quote' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Typography">
        <TweakRadio
          label="Pairing"
          value={tweaks.typePairing}
          onChange={(v) => setTweak('typePairing', v)}
          options={[
            { value: 'editorial', label: 'Serif + Sans' },
            { value: 'sans', label: 'All Sans' },
            { value: 'serif', label: 'All Serif' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Accent">
        <TweakRadio
          label="Gold intensity"
          value={tweaks.accentIntensity}
          onChange={(v) => setTweak('accentIntensity', v)}
          options={[
            { value: 'muted', label: 'Muted' },
            { value: 'default', label: 'Default' },
            { value: 'bright', label: 'Bright' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Misc">
        <TweakToggle
          label="Scroll progress bar"
          value={!!tweaks.showProgress}
          onChange={(v) => setTweak('showProgress', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// Mount
const tweaksRoot = document.createElement('div');
tweaksRoot.id = 'tweaks-root';
document.body.appendChild(tweaksRoot);
ReactDOM.createRoot(tweaksRoot).render(<AppTweaks />);

// Expose defaults globally so vanilla can read on initial render
window.TWEAK_DEFAULTS = window.TWEAK_DEFAULTS || {};