import { IpcRenderer } from 'electron/renderer';
import { useState } from "react";
import './patterns.css';


const ipcRenderer = (window as any).electron.ipcRenderer as IpcRenderer;

const ConfigControls: React.FC<{ updateDelay: number }> = ({ updateDelay }) => {

  const [showDelay, setShowDelay] = useState(false);

  const [manual, _setManual] = useState(false);
  const setManual = (b: boolean) => {
    _setManual(b);
    ipcRenderer.send("manual-mode", b);
  };

  return <>
    <div className="element-row" >
      <div onContextMenu={() => setShowDelay(!showDelay)} onClick={() => setManual(false)} className={"config-button" + (manual ? "" : " manual")}>
        Auto
        {showDelay ?
          <p>Delay:
            <input value={updateDelay} type="number" min="-1000" max="1000" onChange={
              (e) => {
                if (e.currentTarget.value)
                  ipcRenderer.send("update-delay", e.currentTarget.value)
              }
            } /></p>
          : null}

      </div>
      <div onClick={() => setManual(true)} className={"config-button" + (manual ? " manual" : "")}>
        Manual
      </div>
    </div>
  </>;
}

export default ConfigControls;
