import { useCallback, useEffect, useRef, useState } from "react";
export function useOnClickOutside(handler) {
    const panelRef = useRef(null);
    const iconRef = useRef(null);
    const listener = (event) => {
        if (!panelRef.current ||
            !iconRef.current ||
            (event.target instanceof Node &&
                (panelRef.current.contains(event.target) ||
                    iconRef.current.contains(event.target)))) {
            return;
        }
        handler(event);
    };
    const setListener = () => {
        document.addEventListener("mousedown", listener);
        document.addEventListener("touchstart", listener);
    };
    useEffect(() => {
        return () => {
            document.removeEventListener("mousedown", listener);
            document.removeEventListener("touchstart", listener);
        };
    }, []);
    const setPanelRef = useCallback((node) => {
        if (node && node instanceof HTMLElement) {
            panelRef.current = node;
            setListener();
        }
    }, []);
    const setIconRef = useCallback((node) => {
        if (node && node instanceof HTMLElement) {
            iconRef.current = node;
            setListener();
        }
    }, []);
    return { panelRef, setPanelRef, iconRef, setIconRef };
}
export function executeMediaQuery(mediaQuery) {
    return window.matchMedia(mediaQuery);
}
export function useMediaQuery(mediaQuery) {
    const [isMatched, setIsMatched] = useState(executeMediaQuery(mediaQuery).matches);
    useEffect(() => {
        const query = executeMediaQuery(mediaQuery);
        const listener = (event) => {
            setIsMatched(event.matches);
        };
        query.addEventListener("change", listener);
        return () => {
            query.removeEventListener("change", listener);
        };
    }, []);
    return isMatched;
}
