import { useEffect, RefObject } from "react";

type RefType = RefObject<HTMLElement | undefined>;

/**
 * Detects clicks outside the provided refs
 * @param refs A single ref or an array of refs - clicking inside any of these will prevent the callback from firing
 * @param callback The function that gets called when a click is detected outside a ref in the refs param
 */
export const useOutsideClick = (
  refs: RefType | RefType[],
  callback: () => void,
) => {
  useEffect(() => {
    const handleRef = (currentRef: any, target: EventTarget | null) => {
      return currentRef.current && currentRef.current.contains(target as Node);
    };

    const handleClick = (event: Event) => {
      let clickInRef = false;
      if (refs instanceof Array) {
        clickInRef = refs.some((currentRef: any) =>
          handleRef(currentRef, event.target),
        );
      } else {
        clickInRef = handleRef(refs, event.target);
      }

      if (!clickInRef) {
        callback();
      }
    };

    document.addEventListener("click", handleClick, true);

    return () => {
      document.removeEventListener("click", handleClick, true);
    };
  }, [refs, callback]);
};