const TWEAKS = /*EDITMODE-BEGIN*/{
  "direction": "D",
  "signalColor": "#1B4DFF"
}/*EDITMODE-END*/;

function App() {
  const [direction, setDirection] = React.useState(TWEAKS.direction || 'C');
  const [signal, setSignal] = React.useState(TWEAKS.signalColor || '#1B4DFF');
  const [tweaksOpen, setTweaksOpen] = React.useState(false);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--signal', signal);
  }, [signal]);

  React.useEffect(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setTweaksOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({type:'__edit_mode_available'}, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const update = (k, v) => {
    if (k === 'direction') setDirection(v);
    if (k === 'signalColor') setSignal(v);
    window.parent.postMessage({type:'__edit_mode_set_keys', edits:{[k]: v}}, '*');
  };

  const Hero = direction === 'A' ? window.HeroA : direction === 'B' ? window.HeroB : direction === 'C' ? window.HeroC : direction === 'D' ? window.HeroD : window.HeroE;

  return (
    <div className="site" data-dir={direction} data-screen-label={`01 Home · Direction ${direction}`}>
      <window.Header />
      <Hero />
      <window.News />
      <window.Services />
      <window.Portfolio />
      <window.Testimonials />
      <window.Flow />
      <window.Blog />
      <window.Invaders />
      <window.CtaBand />
      <window.Company />
      <window.Footer />

      <div className={'tweaks ' + (tweaksOpen ? 'open' : '')}>
        <h6>Tweaks</h6>
        <div className="row">
          <label>Direction</label>
          <div className="seg">
            {['A','B','C','D','E'].map(k =>
              <button key={k} className={direction===k ? 'active' : ''} onClick={() => update('direction', k)}>{k}</button>
            )}
          </div>
        </div>
        <div className="row">
          <label>Signal color</label>
          <div className="seg">
            {[{n:'Blue',v:'#1B4DFF'},{n:'Ink',v:'#0B0B0C'},{n:'Red',v:'#B5241C'},{n:'Green',v:'#1A7F3C'}].map(c =>
              <button key={c.v} className={signal===c.v ? 'active' : ''} onClick={() => update('signalColor', c.v)}>{c.n}</button>
            )}
          </div>
        </div>
        <div style={{fontSize:9, letterSpacing:'.15em', color:'var(--fg-3)', textTransform:'uppercase', marginTop:12, paddingTop:12, borderTop:'1px solid var(--grid)'}}>
          A · Grid | B · Plot | C · Terminal | D · Render | E · Machine
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);