import { useEffect, useState } from "react";

export const useKeypressed = (key, element = window.document) => {
  const [keyPressed, setKeyPressed] = useState(false);

  const onKeyDownEventHandler = (e) => {
    if (
      e.key === key &&
      e.srcElement.closest("button") === null && // we don't want to hijack buttons
      (e.srcElement === element || element.contains(e.srcElement))
    ) {
      e.stopPropagation();
      e.preventDefault();
      setKeyPressed(true);
    }
  };
  useEffect(() => {
    if (element) {
      element.addEventListener("keydown", onKeyDownEventHandler);
    }
    return () => {
      if (element) {
        element.removeEventListener("keydown", onKeyDownEventHandler);
      }
    };
  }, [key, element]);
  return keyPressed;
};

export default useKeypressed;