import { useEffect, useState } from 'react';

export const PHONE_WIDTH_QUERY = '(max-width: 639px)';
/** Tablet and narrower: where the calendar's week columns are too narrow for a desktop event card. */
export const TABLET_WIDTH_QUERY = '(max-width: 1180px)';

const useMediaMatch = (mediaQuery: string): boolean => {
    const query = () => typeof window !== 'undefined' && typeof window.matchMedia === 'function'
        ? window.matchMedia(mediaQuery)
        : undefined;
    const [matches, setMatches] = useState<boolean>(() => query()?.matches ?? false);

    useEffect(() => {
        const list = query();
        if (!list) return undefined;
        const update = () => setMatches(list.matches);
        update();
        list.addEventListener('change', update);
        return () => list.removeEventListener('change', update);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [mediaQuery]);

    return matches;
};

/** True below the `sm` breakpoint, where a screen has room for one thing at a time. */
export const useIsPhoneWidth = (): boolean => useMediaMatch(PHONE_WIDTH_QUERY);

export const useIsTabletOrNarrower = (): boolean => useMediaMatch(TABLET_WIDTH_QUERY);