const TWEAKS = /*EDITMODE-BEGIN*/{
  "accent": "terracotta",
  "theme": "dark"
}/*EDITMODE-END*/;

function Tweaks() {
  const [open, setOpen] = React.useState(false);
  const [state, setState] = React.useState(TWEAKS);
  React.useEffect(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setOpen(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);
  React.useEffect(() => {
    document.body.setAttribute('data-accent', state.accent);
    document.body.setAttribute('data-theme', state.theme);
  }, [state]);
  const set = (k, v) => {
    const next = { ...state, [k]: v };
    setState(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };
  if (!open) return null;
  return (
    <div className="tweaks open">
      <h5><span>Tweaks</span><span style={{ color: 'var(--accent)' }}>·</span></h5>
      <div className="row">
        <label>Accent</label>
        <select value={state.accent} onChange={e => set('accent', e.target.value)}>
          <option value="terracotta">TERRACOTTA</option>
          <option value="violet">VIOLET</option>
          <option value="cyan">CYAN</option>
          <option value="lime">LIME</option>
        </select>
      </div>
      <div className="row">
        <label>Theme</label>
        <select value={state.theme} onChange={e => set('theme', e.target.value)}>
          <option value="dark">DARK</option>
          <option value="light">LIGHT</option>
        </select>
      </div>
    </div>
  );
}
window.Tweaks = Tweaks;