/* global React, Icon */
const { useState, useEffect } = React;

function Tweaks({ tweaks, setTweaks, active }) {
  if (!active) return null;

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

  return (
    <div className="tweaks">
      <div className="tweaks-head">
        <span>Tweaks</span>
        <div className="dot-row"><i/><i/><i/></div>
      </div>
      <div className="tweaks-body">
        <div className="tweaks-group">
          <label>Accent role</label>
          <div className="tweaks-seg">
            {["faithful", "modern", "bold"].map(v => (
              <button key={v} data-on={tweaks.accentRole === v} onClick={() => update("accentRole", v)}>{v}</button>
            ))}
          </div>
        </div>
        <div className="tweaks-group">
          <label>Density</label>
          <div className="tweaks-seg">
            {["comfortable", "compact"].map(v => (
              <button key={v} data-on={tweaks.density === v} onClick={() => update("density", v)}>{v}</button>
            ))}
          </div>
        </div>
        <div className="tweaks-group">
          <label className="tweaks-check">
            <input type="checkbox" checked={!!tweaks.showEditorialNotes}
              onChange={e => update("showEditorialNotes", e.target.checked)}/>
            Mostrar notas editoriales
          </label>
        </div>
      </div>
    </div>
  );
}

window.Tweaks = Tweaks;