import { RefObject, useEffect } from "react";

const useClickOutside = (
  ref: RefObject<HTMLDivElement>,
  conditionForRegistering: boolean,
  callback: () => void
) => {
  const handleClickOutside = (event: MouseEvent) => {
    if (
      ref.current &&
      !ref.current.contains(event.target as Node) &&
      ref.current &&
      !ref.current.contains(event.target as Node)
    ) {
      callback();
    }
  };

  useEffect(() => {
    if (conditionForRegistering) {
      document.addEventListener("mousedown", handleClickOutside);
    } else {
      document.removeEventListener("mousedown", handleClickOutside);
    }
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [conditionForRegistering]);
};

export default useClickOutside;