// v2 tweaks — mood of the sky, ground, fonts.
const { useEffect } = React;

const V2_TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "clear",
  "ground": "ivory",
  "fDisplay": "Instrument Serif",
  "fBody": "Geist"
}/*EDITMODE-END*/;

function applyV2(t) {
  const root = document.documentElement;
  root.style.setProperty('--tw-f-display', `"${t.fDisplay}"`);
  root.style.setProperty('--tw-f-body',    `"${t.fBody}"`);
  root.setAttribute('data-mood',   t.mood);
  root.setAttribute('data-ground', t.ground);
}
applyV2(V2_TWEAKS_DEFAULTS);

function V2Tweaks() {
  const [t, setTweak] = useTweaks(V2_TWEAKS_DEFAULTS);
  useEffect(() => { applyV2(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="The sky">
        <TweakSelect
          label="Mood"
          value={t.mood}
          onChange={(v) => setTweak('mood', v)}
          options={[
            { value: 'clear',     label: 'Clear afternoon (default)' },
            { value: 'dawn',      label: 'Dawn' },
            { value: 'twilight',  label: 'Twilight' },
            { value: 'midnight',  label: 'Midnight' },
          ]}
        />
      </TweakSection>

      <TweakSection label="The ground">
        <TweakRadio
          label="Paper"
          value={t.ground}
          onChange={(v) => setTweak('ground', v)}
          options={[
            { value: 'ivory', label: 'ivory' },
            { value: 'white', label: 'white' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Type">
        <TweakSelect
          label="Display"
          value={t.fDisplay}
          onChange={(v) => setTweak('fDisplay', v)}
          options={[
            { value: 'Instrument Serif',   label: 'Instrument Serif' },
            { value: 'Cormorant Garamond', label: 'Cormorant Garamond' },
            { value: 'EB Garamond',        label: 'EB Garamond' },
            { value: 'Newsreader',         label: 'Newsreader' },
            { value: 'DM Serif Display',   label: 'DM Serif Display' },
          ]}
        />
        <TweakSelect
          label="Body"
          value={t.fBody}
          onChange={(v) => setTweak('fBody', v)}
          options={[
            { value: 'Geist',         label: 'Geist' },
            { value: 'Inter',         label: 'Inter' },
            { value: 'IBM Plex Sans', label: 'IBM Plex Sans' },
            { value: 'Manrope',       label: 'Manrope' },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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