/* eslint-disable react-hooks/exhaustive-deps */
import { Transition } from "react-transition-group";
import useModalStore from "../stores/useModalStore";
import { useEffect } from "react";

function ModalContainer() {
  const [modal, setModal] = useModalStore((state) => [
    state.modal,
    state.setModal,
  ]);

  useEffect(() => {
    function handleKeyUp(e: KeyboardEvent) {
      if (e.key === "Escape") {
        setModal(null);
      }
    }

    document.addEventListener("keyup", handleKeyUp);

    return () => {
      document.removeEventListener("keyup", handleKeyUp);
    };
  }, []);

  return (
    <Transition
      in={modal ? true : false}
      timeout={150}
      mountOnEnter
      unmountOnExit
    >
      {(state) => (
        <div
          className={`min-h-screen p-8 absolute z-20 top-0 left-0 w-full flex justify-center items-center bg-black bg-opacity-30 overflow-auto transition-opacity ${state}`}
        >
          {modal}
        </div>
      )}
    </Transition>
  );
}

export default ModalContainer;