import React, {useCallback} from "react";

/***
 * useOutsideClick will trigger a callback when the user clicks anywhere outside of the provided HTML Dom element via the ref object.
 * @param ref
 * @param callback
 */
export function useOutsideClick(ref: React.RefObject<HTMLElement | undefined>, callback: Function) {
    const handleClick = useCallback((evt: DocumentEventMap["click"]) => {
        const el = evt.target;
        if (ref.current && el instanceof Node && !ref.current.contains(el)) {
            callback();
        }
    }, []);

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