import "./styles.css";

import { useEffect, useState, useCallback } from "react";
/**
 * useKeyPress
 * @param {string} key - the name of the key to respond to, compared against event.key
 * @param {function} action - the action to perform on key press
 */
export function useKeypress(key, action) {
  useEffect(() => {
    function onKeyup(e) {
      if (e.key === key) action();
    }
    window.addEventListener("keyup", onKeyup);
    return () => window.removeEventListener("keyup", onKeyup);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [action]);
}

export function useKeypress2(key, action) {
  useEffect(() => {
    function onKeyup(e) {
      if (e.key === key) action();
    }
    window.addEventListener("keyup", onKeyup);
    return () => window.removeEventListener("keyup", onKeyup);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  });
}




export default function App() {
  const [confirm, setConfirm] = useState(false);

  const _confirm = useCallback(() => {
    setConfirm((prev) => !prev);
    console.log(confirm);
  }, [confirm]);

  const _confirm2 = () => {
    setConfirm((prev) => !prev);
    console.log(confirm);
  };

  useKeypress("Escape", _confirm);
  useKeypress2("z", _confirm2);


  return (
    <div className="App">
      {confirm.toString()}
    </div>
  );
}