import { useEffect, useState } from "react";

export function useMediaQuery(query: string): boolean {
    const media = window.matchMedia(query);
    const [ matches, setMatches ] = useState(media.matches);
    
    useEffect(() => {
        const listener = (evt: MediaQueryListEvent) => {
            setMatches(evt.matches);
        };
        media.addListener(listener);
        return () => {media.removeListener(listener)}
    }, []);

    return matches;
}

export function usePrintMediaQuery(): boolean {
    const isMediaQueryPrint = useMediaQuery("print");
    const [ isPrint, setIsPrint ] = useState(false);

    // Firefox/IE compatibility layer
    useEffect(() => {
        const beforePrint = () => {
            setIsPrint(true);
        };
        const afterPrint = () => {
            setIsPrint(false);
        };
        
        window.addEventListener('beforeprint', beforePrint);
        window.addEventListener('afterprint', afterPrint);

        return () => {
            window.removeEventListener('beforeprint', beforePrint);
            window.removeEventListener('afterprint', afterPrint);
        };
    }, []);

    return isMediaQueryPrint || isPrint;
}