const { useState: useStateT, useEffect: useEffectT } = React;

const Tweaks = ({ tweaks, setTweak }) => {
  const [open, setOpen] = useStateT(false);
  const [available, setAvailable] = useStateT(false);

  useEffectT(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setOpen(true);
      if (d.type === '__deactivate_edit_mode') setOpen(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    setAvailable(true);
    return () => window.removeEventListener('message', onMsg);
  }, []);

  if (!available) return null;

  const apply = (k, v) => {
    setTweak(k, v);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  return (
    <div className={`tweaks-panel ${open ? 'open' : ''}`}>
      <h4>Tweaks</h4>
      <div className="tw-row">
        <label>Accent</label>
        <div className="opts">
          {[['violet', 'Violet'], ['teal', 'Teal'], ['slate', 'Slate']].map(([v, l]) => (
            <button key={v} className={tweaks.accentMode === v ? 'active' : ''}
              onClick={() => apply('accentMode', v)}>{l}</button>
          ))}
        </div>
      </div>
      <div className="tw-row">
        <label>Color shift</label>
        <div className="opts">
          <button className={tweaks.showColorShift ? 'active' : ''} onClick={() => apply('showColorShift', true)}>On</button>
          <button className={!tweaks.showColorShift ? 'active' : ''} onClick={() => apply('showColorShift', false)}>Off</button>
        </div>
      </div>
      <div className="tw-row">
        <label>Density</label>
        <div className="opts">
          {['compact', 'comfortable', 'roomy'].map((v) => (
            <button key={v} className={tweaks.density === v ? 'active' : ''}
              onClick={() => apply('density', v)}>{v[0].toUpperCase()}</button>
          ))}
        </div>
      </div>
    </div>
  );
};

window.Tweaks = Tweaks;