"use client";
import { useAppSize } from "../media-queries/AppSizeProvider.js";
import { useToggle } from "../useToggle.js";
import { useHorizontalLayoutTransition } from "./useHorizontalLayoutTransition.js";
import { useTemporaryLayout } from "./useTemporaryLayout.js";
/**
 * @example
 * Main USage
 * ```tsx
 * import {
 *   AppBarTitle,
 *   Button,
 *   LayoutAppBar,
 *   LayoutNav,
 *   Main,
 *   Sheet,
 *   useExpandableLayout,
 * } from "@react-md/core";
 * import type { ReactElement, 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>
 *     </>
 *   }
 * }
 * ```
 *
 * @remarks \@since 6.0.0
 * @see {@link useResizableLayout}
 */ export function useExpandableLayout(options) {
    const { defaultExpanded = false, fullHeightNav = false, transitionProps, temporaryUntil = "tablet", ...temporaryOptions } = options;
    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 temporary = isPhone || temporaryUntil === "desktop" && !isDesktop;
    return {
        visible,
        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();
                }
            }
        }
    };
}

//# sourceMappingURL=useExpandableLayout.js.map