import {forwardRef, RefObject, useEffect} from "react";

export function useClickedOutside(ref: RefObject<HTMLElement>, callback: () => void, ignoredElements: Array<RefObject<HTMLElement>> = []) {
    useEffect(() => {
        function handleClick(event: Event) {
            const clickedNode = event.target as Node | null;
            let ignoreClick = false;

            ignoredElements.forEach(el => {
                if (el.current && el.current.contains(clickedNode)) {
                    ignoreClick = true
                }
            })

            if (!ignoreClick && ref.current && !ref.current.contains(clickedNode)) {
                callback();
            }
        }

        document.addEventListener("click", handleClick);

        return () => {
            document.addEventListener("click", handleClick);
        }
    }, []);
}