import { useCallback, useSyncExternalStore } from 'react';
import { f as BREAKPOINT_SIZES } from './DataList.const-es.js';

const mediaQueryStore = {
    subscribe(onChange, query) {
        const matchMedia = window.matchMedia(query);
        matchMedia.addEventListener("change", onChange);
        return () => {
            matchMedia.removeEventListener("change", onChange);
        };
    },
    getSnapshot(query) {
        return () => window.matchMedia(query).matches;
    },
};
function useMediaQuery(query) {
    /**
     * matchMedia have had full support for browsers since 2012 but jest, being a
     * lite version of a DOM, doesn't support it.
     *
     * Instead of the consumers mocking matchMedia on every usage of DataList,
     * we can just return true to mimic the largest screen we support.
     *
     * In the event that the consumer wants to test the DataList on different
     * screen sizes, they can use the `mockViewportWidth` function from
     * `@jobber/components/useBreakpoints`.
     */
    if (typeof window === "undefined" ||
        typeof window.matchMedia === "undefined") {
        return true;
    }
    const subscribeMediaQuery = useCallback((onChange) => mediaQueryStore.subscribe(onChange, query), [query]);
    const matches = useSyncExternalStore(subscribeMediaQuery, mediaQueryStore.getSnapshot(query), () => true);
    return matches;
}

function useResponsiveSizing() {
    // This was originally written to look for "min-width: 0" which would always
    // return true no matter what.
    // So, instead of running media query on it, just set it to true.
    const xs = true;
    const sm = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.sm}px)`);
    const md = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.md}px)`);
    const lg = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.lg}px)`);
    const xl = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.xl}px)`);
    return { xs, sm, md, lg, xl };
}

export { useResponsiveSizing as u };
