/* global React, TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio */
const { useEffect: useEffectT } = React;

const ACCENT_OPTIONS = [
  ['#8B7355', 'Warm Taupe'],
  ['#7B8F84', 'Warm Sage'],
  ['#6F8B8C', 'Dusty Teal'],
  ['#A07555', 'Terracotta'],
];

const HEADING_FONTS = {
  'Cormorant': "'Cormorant Garamond', serif",
  'Playfair': "'Playfair Display', serif",
  'DM Serif': "'DM Serif Display', serif",
};

function HomeTweaks() {
  const [t, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "accent": "#8B7355",
    "headingFont": "Cormorant",
    "heroVariant": "editorial"
  }/*EDITMODE-END*/);

  useEffectT(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--accent-hover', shade(t.accent, -14));
  }, [t.accent]);

  useEffectT(() => {
    const stack = HEADING_FONTS[t.headingFont] || HEADING_FONTS['Cormorant'];
    document.documentElement.style.setProperty('--serif-display', stack);
    if (t.headingFont === 'DM Serif' && !document.getElementById('dm-serif-link')) {
      const l = document.createElement('link');
      l.id = 'dm-serif-link';
      l.rel = 'stylesheet';
      l.href = 'https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap';
      document.head.appendChild(l);
    }
  }, [t.headingFont]);

  useEffectT(() => {
    window.__heroVariant = t.heroVariant;
    window.dispatchEvent(new CustomEvent('herovariant', { detail: t.heroVariant }));
  }, [t.heroVariant]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent colour" />
      <TweakColor
        value={t.accent}
        options={ACCENT_OPTIONS.map(([c]) => c)}
        onChange={v => setTweak('accent', v)}
      />
      <TweakSection label="Heading font" />
      <TweakRadio
        value={t.headingFont}
        options={['Cormorant', 'Playfair', 'DM Serif']}
        onChange={v => setTweak('headingFont', v)}
      />
      <TweakSection label="Hero layout" />
      <TweakRadio
        value={t.heroVariant}
        options={['editorial', 'split']}
        onChange={v => setTweak('heroVariant', v)}
      />
    </TweaksPanel>
  );
}

function shade(hex, amt) {
  const h = hex.replace('#', '');
  const num = parseInt(h, 16);
  let r = (num >> 16) + amt;
  let g = ((num >> 8) & 0x00FF) + amt;
  let b = (num & 0x0000FF) + amt;
  r = Math.max(0, Math.min(255, r));
  g = Math.max(0, Math.min(255, g));
  b = Math.max(0, Math.min(255, b));
  return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
}

window.HomeTweaks = HomeTweaks;