import {useCallback} from "react";

/***
 * useOutsideClick will trigger a callback when the user clicks anywhere outside of the provided HTML Dom elements
 * @param elements
 * @param callback
 */
export function useOutsideClickV2(elements: Array<HTMLElement | null>, callback: Function) {
    const handleClick = useCallback((evt: DocumentEventMap["click"]) => {
        const targetEl = evt.target;
        let isOutsideOfAll = true;
        for(let el of elements) {
            if (el && targetEl instanceof Node && el.contains(targetEl)) {
                isOutsideOfAll = false;
                break;
            }
        }
        if(isOutsideOfAll) {
            callback();
        }
    }, elements);

    return {
        startListening: () => {
            return document.addEventListener("click", handleClick, {capture: true})
        },
        stopListening: () => {
            return document.removeEventListener("click", handleClick, {capture: true})
        },
    }
}