"use client";
import { cnb } from "cnbuilder";
import { useSsr } from "../SsrProvider.js";
import { useAppSize } from "../media-queries/AppSizeProvider.js";
import { MEDIA_QUERY_CONFIG } from "../media-queries/config.js";
import { useMediaQuery } from "../media-queries/useMediaQuery.js";
import { useToggle } from "../useToggle.js";
import { useDevEffect } from "../utils/useDevEffect.js";
import { useHorizontalLayoutTransition } from "./useHorizontalLayoutTransition.js";
import { useTemporaryLayout } from "./useTemporaryLayout.js";
let loggedOnce = false;
/**
 * @example Main Usage
 * ```tsx
 * import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
 * import { Button } from "@react-md/core/button/Button";
 * import { LayoutAppBar } from "@react-md/core/layout/LayoutAppBar";
 * import { LayoutNav } from "@react-md/core/layout/LayoutNav";
 * import { Main } from "@react-md/core/layout/Main";
 * import { useExpandableLayout } from "@react-md/core/layout/useExpandableLayout";
 * import { Sheet } from "@react-md/core/sheet/Sheet";
 * import { type ReactElement, type ReactNode } from "react";
 *
 * import { CustomNavigation } from "./CustomNavigation";
 *
 * export interface LayoutProps {
 *   children: ReactNode;
 * }
 *
 * export function Layout(props: LayoutProps): ReactElement {
 *   const { children } = props;
 *
 *   // choose whichever one for your app
 *   // nextjs app dir
 *   const pathname = usePathname();
 *   // nextjs pages
 *   const { pathname } = useRouter();
 *   // react router
 *   const { pathname } = useHistory();
 *
 *   const {
 *     temporary,
 *     appBarProps,
 *     expandableNavProps,
 *     mainProps,
 *     navToggleProps,
 *     temporaryNavProps,
 *     windowSplitterProps,
 *   } = useExpandableLayout({ pathname });
 *
 *   return (
 *     <>
 *       <LayoutAppBar {...appBarProps}>
 *         <Button {...navToggleProps} />
 *         <AppBarTitle>Hello, world!</AppBarTitle>
 *       </LayoutAppBar>
 *       <LayoutNav {...expandableNavProps}>
 *         <CustomNavigation />
 *       </LayoutNav>
 *       {temporary && (
 *         <Sheet {...temporaryNavProps}>
 *           <CustomNavigation />
 *         </Sheet>
 *       )}
 *       <Main {...mainProps}>{children}</Main>
 *     </>
 *   );
 * }
 * ```
 *
 * If you have a large navigation panel, you can conditionally render the
 * `LayoutNav` with the `persistent` boolean returned by the hook which will
 * ensure that the DOM has rehydrated before unmounting to prevent SSR errors.
 *
 * @example Safely Conditionally Rendering
 * ```diff
 *   const {
 *     temporary,
 * +   persistent,
 *     appBarProps,
 *     expandableNavProps,
 *     mainProps,
 *     navToggleProps,
 *     temporaryNavProps,
 *     windowSplitterProps,
 *   } = useExpandableLayout({ pathname });
 *
 *   return (
 *     <>
 *       <LayoutAppBar {...appBarProps}>
 *         <Button {...navToggleProps} />
 *         <AppBarTitle>Hello, world!</AppBarTitle>
 *       </LayoutAppBar>
 * -     <LayoutNav {...expandableNavProps}>
 * -       <CustomNavigation />
 * -     </LayoutNav>
 * +     {persistent && (
 * +       <LayoutNav {...expandableNavProps}>
 * +         <CustomNavigation />
 * +       </LayoutNav>
 * +     )}
 *       {temporary && (
 *         <Sheet {...temporaryNavProps}>
 *           <CustomNavigation />
 *         </Sheet>
 *       )}
 *       <Main {...mainProps}>{children}</Main>
 *     </>
 *   );
 * ```
 *
 * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
 * @since 6.0.0
 * @see {@link useResizableLayout}
 */ export function useExpandableLayout(options) {
    const { fullHeightNav = false, temporaryUntil = "tablet", transitionProps, defaultExpanded = fullHeightNav === "static", ...temporaryOptions } = options;
    const ssr = useSsr();
    const { appBarProps, mainProps, navToggleProps, temporaryNavProps, hideTemporaryNav, showTemporaryNav, visible } = useTemporaryLayout(temporaryOptions);
    const { toggled: expanded, enable: expandNavigation, disable: collapseNavigation, toggle: toggleNavigation } = useToggle(defaultExpanded);
    const { elementProps } = useHorizontalLayoutTransition({
        ...transitionProps,
        transitionIn: expanded
    });
    const { isPhone, isDesktop } = useAppSize();
    const isAppSizeMatch = temporaryUntil === "tablet" || temporaryUntil === "desktop";
    const matches = useMediaQuery(temporaryUntil, isAppSizeMatch);
    const temporary = isAppSizeMatch ? isPhone || temporaryUntil === "desktop" && !isDesktop : !matches;
    useDevEffect(()=>{
        if (process.env.NODE_ENV === "test") {
            return;
        }
        let query;
        if (temporaryUntil === "tablet" || temporaryUntil === "desktop") {
            const minWidth = temporaryUntil === "tablet" ? MEDIA_QUERY_CONFIG.tabletMinWidth : MEDIA_QUERY_CONFIG.desktopMinWidth;
            query = `screen and (min-width: ${minWidth})`;
        } else {
            query = temporaryUntil;
        }
        const timeout = window.setTimeout(()=>{
            let found = false;
            for(let i = 0; i < document.styleSheets.length; i++){
                const sheet = document.styleSheets[i];
                try {
                    const rules = sheet.cssRules;
                    for(let j = 0; j < rules.length; j++){
                        const rule = rules[j];
                        if (rule.cssText.includes(".rmd-layout") && rule.cssText.includes(`@media ${query}`)) {
                            found = true;
                            return;
                        }
                    }
                } catch  {
                //
                }
            }
            if (!found && !loggedOnce) {
                loggedOnce = true;
                // eslint-disable-next-line no-console
                console.error(`The react-md expandable layout has set \`temporaryUntil: "${temporaryUntil}"\` but the corresponding styles have not been found.` + " This usually  means the `$layout-navigation-breakpoint` or `temporaryUntil` value should be updated match.\n\n" + "See https://react-md.dev/getting-started/layout#updating-the-layout-to-be-temporary-until-a-specific-breakpoint-optional " + "for more information.");
            }
        }, 3000);
        return ()=>{
            window.clearTimeout(timeout);
        };
    }, [
        temporaryUntil
    ]);
    return {
        visible,
        temporary,
        persistent: ssr || !temporary,
        hideTemporaryNav,
        showTemporaryNav,
        expanded,
        expandNavigation,
        collapseNavigation,
        toggleNavigation,
        appBarProps: {
            ...appBarProps,
            ...fullHeightNav ? elementProps : {}
        },
        mainProps: {
            ...mainProps,
            ...elementProps
        },
        temporaryNavProps,
        expandableNavProps: {
            expanded,
            appBarOffset: !fullHeightNav
        },
        navToggleProps: {
            ...navToggleProps,
            onClick () {
                if (temporary) {
                    showTemporaryNav();
                } else {
                    toggleNavigation();
                }
            },
            className: cnb(fullHeightNav === "static" && "rmd-layout-nav-toggle")
        }
    };
}

//# sourceMappingURL=useExpandableLayout.js.map