/* Tweaks panel for MLBB landing */
const { useEffect } = React;

function MLBBTweaks() {
  const defaults = /*EDITMODE-BEGIN*/{
    "brandName": "MLBB",
    "version": "v2.7.1",
    "accentHue": 200,
    "scanlines": true,
    "showTicker": true,
    "tagline": "TRADES WHILE YOU SLEEP"
  }/*EDITMODE-END*/;

  const [t, setT] = window.useTweaks(defaults);

  useEffect(() => {
    // accent hue -> recolor the entire palette
    const hue = t.accentHue;
    const green = `hsl(${hue} 100% 50%)`;
    const greenGlow = `hsl(${hue} 100% 62%)`;
    const root = document.documentElement;
    root.style.setProperty('--green', green);
    root.style.setProperty('--green-glow', greenGlow);
    root.style.setProperty('--ink', `hsl(${hue} 60% 89%)`);
    root.style.setProperty('--ink-dim', `hsl(${hue} 25% 54%)`);
    root.style.setProperty('--ink-faint', `hsl(${hue} 30% 28%)`);
    root.style.setProperty('--line', `hsl(${hue} 60% 14%)`);
    root.style.setProperty('--line-2', `hsl(${hue} 55% 21%)`);

    // scanlines
    document.body.style.setProperty('--scan-display', t.scanlines ? 'block' : 'none');
    const id = 'scan-toggle-style';
    let s = document.getElementById(id);
    if (!s) { s = document.createElement('style'); s.id = id; document.head.appendChild(s); }
    s.textContent = t.scanlines ? '' : 'body::before { display: none !important; }';

    // ticker
    const ticker = document.querySelector('.ticker');
    if (ticker) ticker.style.display = t.showTicker ? '' : 'none';

    // brand name
    document.querySelectorAll('[data-brand]').forEach(el => el.textContent = t.brandName);
    document.querySelectorAll('.topbar .brand').forEach(el => {
      el.innerHTML = `▲ ${t.brandName} // ${t.version}`;
    });
    // hero h1
    const h1 = document.querySelector('.hero h1');
    if (h1) {
      h1.innerHTML = `${t.brandName}<span class="slash">//</span><br>${t.tagline.split(' ').slice(0,2).join(' ')}<br>${t.tagline.split(' ').slice(2).join(' ')}.`;
    }
  }, [t]);

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection title="Brand">
        <window.TweakText label="Brand name" value={t.brandName} onChange={v => setT({ brandName: v.toUpperCase() })} />
        <window.TweakText label="Version" value={t.version} onChange={v => setT({ version: v })} />
        <window.TweakText label="Hero tagline" value={t.tagline} onChange={v => setT({ tagline: v.toUpperCase() })} />
      </window.TweakSection>
      <window.TweakSection title="Color">
        <window.TweakSlider label="Accent hue" min={0} max={360} step={1} value={t.accentHue} onChange={v => setT({ accentHue: v })} />
      </window.TweakSection>
      <window.TweakSection title="Effects">
        <window.TweakToggle label="CRT scanlines" value={t.scanlines} onChange={v => setT({ scanlines: v })} />
        <window.TweakToggle label="Market ticker" value={t.showTicker} onChange={v => setT({ showTicker: v })} />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

const _root = document.createElement('div');
document.body.appendChild(_root);
ReactDOM.createRoot(_root).render(<MLBBTweaks />);