"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { createContext, useContext, useMemo } from "react";
import { useSsr } from "../SsrProvider.js";
import { useOrientation } from "../useOrientation.js";
import { DEFAULT_APP_SIZE } from "./appSize.js";
import { MEDIA_QUERY_CONFIG } from "./config.js";
import { useMediaQuery } from "./useMediaQuery.js";
const context = /*#__PURE__*/ createContext({
    __root: false,
    isPhone: false,
    isTablet: false,
    isDesktop: true,
    isLargeDesktop: false,
    isLandscape: true
});
context.displayName = "AppSize";
const { Provider } = context;
/**
 * **Note**: The app size object returned by this hook will **not** be equal
 * between renders.
 *
 * @example Simple Example
 * ```tsx
 * import { useAppSize } from "@react-md/core/media-queries/AppSizeProvider";
 *
 * function Example() {
 *   const { isPhone, isTablet, isDesktop, isLargeDesktop, isLandscape } =
 *     useAppSize()
 *
 *   // do something based on the app size
 *   return null;
 * }
 * ```
 *
 * @returns the current app size.
 * @throws "The `AppSizeProvider` has not been mounted."
 */ export function useAppSize() {
    const { __root, ...appSize } = useContext(context);
    if (!__root) {
        throw new Error("The `AppSizeProvider` has not been mounted.");
    }
    return appSize;
}
/**
 * **Client Component**
 *
 * This component should be mounted near the root of your app to determine the
 * current app size based on different media queries.
 *
 * @see {@link https://react-md.dev/components/core-providers | CoreProviders Demos}
 * @see {@link https://react-md.dev/components/app-size-provider | AppSizeProvider Demos}
 * @since 6.0.0 Renamed from `AppSizeListener`
 */ export function AppSizeProvider(props) {
    const { ssrSize = DEFAULT_APP_SIZE, phoneMaxWidth = MEDIA_QUERY_CONFIG.phoneMaxWidth, tabletMinWidth = MEDIA_QUERY_CONFIG.tabletMinWidth, tabletMaxWidth = MEDIA_QUERY_CONFIG.tabletMaxWidth, desktopMinWidth = MEDIA_QUERY_CONFIG.desktopMinWidth, desktopLargeMinWidth = MEDIA_QUERY_CONFIG.desktopLargeMinWidth, children } = props;
    const { __root } = useContext(context);
    if (__root) {
        throw new Error("The `AppSizeProvider` cannot be mounted multiple times.");
    }
    const ssr = useSsr();
    const matchesDesktop = useMediaQuery(`screen and (min-width: ${desktopMinWidth})`);
    const matchesLargeDesktop = useMediaQuery(`screen and (min-width: ${desktopLargeMinWidth})`);
    const matchesTablet = useMediaQuery(`screen and (min-width: ${tabletMinWidth}) and (max-width: ${tabletMaxWidth})`);
    const matchesPhone = useMediaQuery(`screen and (max-width: ${phoneMaxWidth})`);
    const isDesktop = matchesDesktop;
    const isTablet = !matchesDesktop && matchesTablet;
    const isPhone = !isTablet && !isDesktop && matchesPhone;
    const isLandscape = useOrientation().includes("landscape");
    const isLargeDesktop = matchesLargeDesktop;
    const appSize = useMemo(()=>({
            __root: true,
            isPhone,
            isTablet,
            isDesktop,
            isLargeDesktop,
            isLandscape
        }), [
        isDesktop,
        isLandscape,
        isLargeDesktop,
        isPhone,
        isTablet
    ]);
    let value = appSize;
    if (ssr || typeof window === "undefined") {
        value = {
            __root: true,
            ...ssrSize
        };
    }
    return /*#__PURE__*/ _jsx(Provider, {
        value: value,
        children: children
    });
}

//# sourceMappingURL=AppSizeProvider.js.map