/* Tweaks panel */
const { useState: useTS, useEffect: useTE } = React;

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

  useTE(() => {
    const onMsg = (e) => {
      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 persist = (edits) => {
    setTweaks((t) => ({ ...t, ...edits }));
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits }, "*");
  };

  if (!visible) return null;

  const accents = [
    { c: "#5cc9f5", name: "cyan" },
    { c: "#a99cff", name: "lavender" },
    { c: "#6fe3a5", name: "mint" },
    { c: "#ff8c7a", name: "coral" },
    { c: "#f2b56a", name: "amber" },
  ];

  return (
    <div className="tweaks-panel">
      <div className="tweaks-title">
        <span>Tweaks</span>
        <span style={{color:"var(--text-3)", fontFamily:"var(--mono)", fontSize:10}}>live</span>
      </div>
      <div className="tweaks-row">
        <label>Accent</label>
        <div className="swatch-row">
          {accents.map((a) => (
            <div
              key={a.c}
              className={"swatch " + (tweaks.accent === a.c ? "active" : "")}
              style={{background: a.c}}
              onClick={() => persist({ accent: a.c })}
              title={a.name}
            />
          ))}
        </div>
      </div>
      <div className="tweaks-row">
        <label>Clip thumbs</label>
        <div className={"switch " + (tweaks.showClipThumbs ? "on" : "")} onClick={() => persist({ showClipThumbs: !tweaks.showClipThumbs })}/>
      </div>
      <div className="tweaks-row">
        <label>Timeline grid</label>
        <div className={"switch " + (tweaks.showGrid ? "on" : "")} onClick={() => persist({ showGrid: !tweaks.showGrid })}/>
      </div>
      <div className="tweaks-row">
        <label>Clip gap</label>
        <div style={{display:"grid", gridTemplateColumns:"1fr 32px", gap:8, alignItems:"center"}}>
          <input type="range" min="0" max="8" value={tweaks.clipGap} onChange={(e) => persist({ clipGap: +e.target.value })}/>
          <span className="val">{tweaks.clipGap}px</span>
        </div>
      </div>
      <div className="tweaks-row">
        <label>Density</label>
        <div className="seg">
          {["compact","comfortable","roomy"].map((d) => (
            <button key={d} className={tweaks.density === d ? "active" : ""} onClick={() => persist({ density: d })}>{d[0].toUpperCase()+d.slice(1,3)}</button>
          ))}
        </div>
      </div>
      <div className="tweaks-row">
        <label>Chat width</label>
        <div style={{display:"grid", gridTemplateColumns:"1fr 48px", gap:8, alignItems:"center"}}>
          <input type="range" min="300" max="480" value={tweaks.chatDrawerWidth} onChange={(e) => persist({ chatDrawerWidth: +e.target.value })}/>
          <span className="val">{tweaks.chatDrawerWidth}px</span>
        </div>
      </div>
    </div>
  );
}

window.Tweaks = Tweaks;