import { MutableRefObject, useCallback, useEffect, useRef } from 'react';

const defaultEvent = 'click';
type RefType = Element | (() => Element | null) | null | undefined;

const useClickOutside = <T extends Element>(
  dom: RefType | RefType[],
  callback: (event: Event) => void,
  eventName: string = defaultEvent,
  listenerOptions?: boolean | AddEventListenerOptions
) => {
  const callbackRef = useRef(callback);
  const targetRefs = useRef<RefType[]>([]);
  const element = useRef<T>();

  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  useEffect(() => {
    targetRefs.current = Array.isArray(dom) ? dom : [dom];
  }, [dom]);

  const eventHandler = useCallback(
    (e: Event) => {
      const isOutside = targetRefs.current.every((item) => {
        const el = typeof item === 'function' ? item() : item || element.current;
        return !el?.contains(e.target as Node);
      });

      if (isOutside) {
        callbackRef.current(e);
      }
    },
    [element.current, targetRefs.current]
  );

  useEffect(() => {
    document.addEventListener(eventName, eventHandler, listenerOptions);
    return () => {
      document.removeEventListener(eventName, eventHandler, listenerOptions);
    };
  }, [eventName, listenerOptions, eventHandler]);

  return element as MutableRefObject<T>;
};

export default useClickOutside;