/* global React */

function Tweaks() {
  const [open, setOpen] = useState(false);
  const [enabled, setEnabled] = useState(false);
  const [tweaks, setTweaks] = useState(window.TWEAKS);

  useEffect(() => {
    const onMsg = (e) => {
      if (!e.data || typeof e.data !== "object") return;
      if (e.data.type === "__activate_edit_mode") { setEnabled(true); setOpen(true); }
      if (e.data.type === "__deactivate_edit_mode") { setEnabled(false); setOpen(false); }
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

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

  useEffect(() => { applyTweaks(tweaks); }, []);

  if (!enabled) return null;

  return (
    <aside className={"tweaks" + (open ? " is-open" : "")}>
      <div className="tweaks__head">
        <span className="tweaks__title">Tweaks</span>
        <button className="tweaks__close" onClick={() => setOpen(false)}><Icon name="x" size={16}/></button>
      </div>
      <div className="tweaks__body">
        <div className="tweak-row">
          <label className="tweak-row__label">Accent · Primary <small>{tweaks.accentPrimary}</small></label>
          <div className="tweak-swatches">
            {["#0f4d2a", "#14533a", "#1a6b3d", "#0b3d22", "#2d7a4f"].map(c => (
              <button key={c} className={"tweak-swatch" + (tweaks.accentPrimary === c ? " is-active" : "")} style={{background: c}} onClick={() => set("accentPrimary", c)}/>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <label className="tweak-row__label">Gold accent <small>{tweaks.accentGold}</small></label>
          <div className="tweak-swatches">
            {["#c9a961", "#a88639", "#d9bd7a", "#8a6522", "#e6cf9a"].map(c => (
              <button key={c} className={"tweak-swatch" + (tweaks.accentGold === c ? " is-active" : "")} style={{background: c}} onClick={() => set("accentGold", c)}/>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <label className="tweak-row__label">Phone rotation <small>{tweaks.phoneAngle}°</small></label>
          <input type="range" min="-18" max="18" step="1" value={tweaks.phoneAngle} onChange={e => set("phoneAngle", +e.target.value)} className="tweak-range"/>
        </div>
        <div className="tweak-row">
          <label className="tweak-row__label">Pattern density <small>{tweaks.patternDensity.toFixed(2)}</small></label>
          <input type="range" min="0" max="1" step=".05" value={tweaks.patternDensity} onChange={e => set("patternDensity", +e.target.value)} className="tweak-range"/>
        </div>
        <div className="tweak-toggle">
          <span>Dark mode</span>
          <input type="checkbox" checked={tweaks.darkMode} onChange={e => set("darkMode", e.target.checked)}/>
        </div>
      </div>
    </aside>
  );
}

function applyTweaks(t) {
  const r = document.documentElement;
  r.style.setProperty("--g-700", t.accentPrimary);
  r.style.setProperty("--accent", t.accentPrimary);
  r.style.setProperty("--y-600", t.accentGold);
  r.style.setProperty("--accent-2", t.accentGold);
  r.style.setProperty("--pattern-opacity", t.patternDensity);
  r.setAttribute("data-theme", t.darkMode ? "dark" : "light");
}

window.Tweaks = Tweaks;