"use client";
import { useEffect } from "react";
import { getIcon } from "../icon/iconConfig.js";
import { useToggle } from "../useToggle.js";
/**
 * @example
 * ```tsx
 * import {
 *   AppBar,
 *   AppBarTitle,
 *   Button,
 *   Main,
 *   Sheet,
 *   useTemporaryLayout,
 * } from "@react-md/core";
 * import type { ReactElement, ReactNode } from "react";
 *
 * import { CustomNavigation } from "./CustomNavigation.jsx";
 *
 * 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 {
 *     mainProps,
 *     navToggleProps,
 *     temporaryNavProps,
 *   } = useTemporaryLayout({ pathname });
 *
 *   return (
 *     <>
 *       <AppBar position="fixed">
 *         <Button {...navToggleProps} />
 *         <AppBarTitle>Hello, world!</AppBarTitle>
 *       </AppBar>
 *       <Main {...mainProps}>{children}</Main>
 *       <Sheet {...temporaryNavProps}>
 *         <CustomNavigation />
 *       </Sheet>
 *     </>
 *   );
 * }
 * ```
 *
 * @remarks \@since 6.0.0
 */ export function useTemporaryLayout(options) {
    const { pathname, defaultVisible = false, appBarPosition = "fixed" } = options;
    const menuIcon = getIcon("menu");
    const { toggled: visible, enable: showTemporaryNav, disable: hideTemporaryNav } = useToggle(defaultVisible);
    // hide the temporary nav whenever the route changes
    useEffect(()=>{
        if (pathname !== null) {
            hideTemporaryNav();
        }
    }, [
        hideTemporaryNav,
        pathname
    ]);
    return {
        visible,
        showTemporaryNav,
        hideTemporaryNav,
        appBarProps: {
            position: appBarPosition
        },
        mainProps: {
            appBarOffset: appBarPosition !== "static"
        },
        temporaryNavProps: {
            "aria-label": "Navigation",
            visible,
            onRequestClose: hideTemporaryNav
        },
        navToggleProps: {
            "aria-label": "Navigation",
            buttonType: "icon",
            children: menuIcon,
            onClick () {
                showTemporaryNav();
            }
        }
    };
}

//# sourceMappingURL=useTemporaryLayout.js.map