const { useEffect: useEffectTw, useState: useStateTw } = React;

function TweaksPanel({ tweaks, setTweaks }) {
  const [visible, setVisible] = useStateTw(false);

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

  const update = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  if (!visible) return null;

  return (
    <div className="tweaks-panel">
      <h5>
        Tweaks
        <span className="mono">Live</span>
      </h5>

      <div className="tweak">
        <span>Grafo de fondo</span>
        <button
          className={`switch ${tweaks.showGraphBackground ? 'on' : ''}`}
          onClick={() => update('showGraphBackground', !tweaks.showGraphBackground)}
        />
      </div>

      <div className="tweak">
        <span>Cuenta atrás</span>
        <button
          className={`switch ${tweaks.showCountdown ? 'on' : ''}`}
          onClick={() => update('showCountdown', !tweaks.showCountdown)}
        />
      </div>

      <div className="tweak">
        <span>Tamaño base</span>
        <input
          type="range"
          min="13"
          max="17"
          step="1"
          value={tweaks.baseFontSize}
          onChange={e => update('baseFontSize', parseInt(e.target.value))}
        />
      </div>

      <div className="tweak">
        <span>Tono acento</span>
        <input
          type="range"
          min="220"
          max="280"
          step="2"
          value={tweaks.accentHue}
          onChange={e => update('accentHue', parseInt(e.target.value))}
        />
      </div>
    </div>
  );
}

window.TweaksPanel = TweaksPanel;