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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "editorial",
  "showAnnotations": true,
  "defaultMetric": "production"
}/*EDITMODE-END*/;

function applyPalette(palette) {
  const root = document.documentElement;
  if (palette === 'editorial') {
    root.style.setProperty('--paper', '#f5f1ea');
    root.style.setProperty('--paper-2', '#ece6da');
    root.style.setProperty('--ink', '#14120e');
    root.style.setProperty('--ink-2', '#3b372f');
    root.style.setProperty('--muted', '#6b6558');
    root.style.setProperty('--rule', '#2a2620');
    root.style.setProperty('--rule-soft', '#d6cfbf');
    root.style.setProperty('--accent', '#b23a2a');
  } else if (palette === 'mono') {
    root.style.setProperty('--paper', '#f4f4f2');
    root.style.setProperty('--paper-2', '#e8e8e5');
    root.style.setProperty('--ink', '#111111');
    root.style.setProperty('--ink-2', '#333333');
    root.style.setProperty('--muted', '#6a6a6a');
    root.style.setProperty('--rule', '#222222');
    root.style.setProperty('--rule-soft', '#d0d0cd');
    root.style.setProperty('--accent', '#222222');
  } else if (palette === 'dark') {
    root.style.setProperty('--paper', '#16150f');
    root.style.setProperty('--paper-2', '#211f16');
    root.style.setProperty('--ink', '#f0ebdc');
    root.style.setProperty('--ink-2', '#bab3a0');
    root.style.setProperty('--muted', '#807868');
    root.style.setProperty('--rule', '#6a6351');
    root.style.setProperty('--rule-soft', '#32301f');
    root.style.setProperty('--accent', '#e9764e');
  } else if (palette === 'ember') {
    root.style.setProperty('--paper', '#fbf7ef');
    root.style.setProperty('--paper-2', '#f1ecdf');
    root.style.setProperty('--ink', '#1a1508');
    root.style.setProperty('--ink-2', '#3a3120');
    root.style.setProperty('--muted', '#766b52');
    root.style.setProperty('--rule', '#2d2613');
    root.style.setProperty('--rule-soft', '#dfd7c1');
    root.style.setProperty('--accent', '#8f6a2e');
  }
}

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

  useEffect(() => {
    applyPalette(tweaks.palette);
  }, [tweaks.palette]);

  useEffect(() => {
    document.querySelectorAll('.step-num, .step-stat, .kicker').forEach(() => {});
    // annotations toggled via class
    document.body.classList.toggle('hide-annotations', !tweaks.showAnnotations);
  }, [tweaks.showAnnotations]);

  useEffect(() => {
    if (window.setChoroplethMetric) window.setChoroplethMetric(tweaks.defaultMetric);
  }, [tweaks.defaultMetric]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Palette">
        <TweakRadio
          value={tweaks.palette}
          onChange={v => setTweak('palette', v)}
          options={[
            { value: 'editorial', label: 'Editorial (default)' },
            { value: 'ember', label: 'Ember gold' },
            { value: 'mono', label: 'Monochrome' },
            { value: 'dark', label: 'Dark reader' },
          ]}
        />
      </TweakSection>

      <TweakSection title="Default metric">
        <TweakRadio
          value={tweaks.defaultMetric}
          onChange={v => setTweak('defaultMetric', v)}
          options={[
            { value: 'production', label: 'TWh produced' },
            { value: 'share', label: '% of grid' },
            { value: 'perCapita', label: 'Per capita' },
          ]}
        />
      </TweakSection>

      <TweakSection title="Annotations">
        <TweakToggle
          checked={tweaks.showAnnotations}
          onChange={v => setTweak('showAnnotations', v)}
          label="Show chart annotations"
        />
      </TweakSection>
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root') || (() => {
  const el = document.createElement('div');
  el.id = 'tweaks-root';
  document.body.appendChild(el);
  return el;
})()).render(<TweakApp />);