"use client";
import { useEffect, useMemo } from "react";
import { useTreeExpansion } from "../tree/useTreeExpansion.js";
import { getTreeItemsFrom } from "../tree/utils.js";
const noop = ()=>{
// do nothing
};
/**
 * @internal
 */ const getParentIds = (itemId, navItems)=>getTreeItemsFrom(navItems, itemId).map(({ itemId })=>itemId);
/**
 * Before considering to use a `Tree` for site navigation, it is important to
 * understand:
 * - There is a lot of functionality required to implement the tree widget so
 *   your bundle size will increase
 * - A pattern more suited for typical site navigation with expandable groups of
 *   links is the disclosure pattern.
 * - @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
 *
 * @see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/
 *
 * This is a pretty reasonable default implementation for having a navigation
 * tree within the Layout component. The way it'll work is that the current
 * route will be the only selected item within the tree. When the pathname
 * changes, the selectedIds will be updated to only be the current pathname once
 * again.
 *
 * This means that you can use whatever routing library or history provider that
 * ensures that your layout re-renders on a path change.
 *
 * @example
 * ```tsx
 * import { Tree, useLayoutTree } from "@react-md/core";
 * import type { TreeData } from "@react-md/core";
 * import type { ReactElement } from "react";
 *
 * // choose your routing library...
 * import { Link, useLocation } from "react-router";
 *
 * const navItems = {
 *   "/": {
 *     itemId: "/",
 *     parentId: null,
 *     children: "Home",
 *     leftAddon: <HomeIcon />,
 *     to: "/",
 *   },
 *   "/route-1": {
 *     itemId: "/route-1",
 *     parentId: null,
 *     children: "Route 1",
 *     leftAddon: <TvIcon />,
 *     to: "/route-1",
 *   },
 *   "/route-2": {
 *     itemId: "/route-2",
 *     parentId: null,
 *     children: "Route 2",
 *     leftAddon: <AppsIcon />,
 *     to: "/route-2",
 *   },
 *   "/route-3": {
 *     itemId: "/route-3",
 *     parentId: null,
 *     children: "Route 3",
 *     leftAddon: <BookIcon />,
 *     to: "/route-3",
 *   },
 * } satisfies TreeData;
 *
 * function Example(): ReactElement {
 *   const { pathname } = useLocation();
 *   const tree = useLayoutTree({
 *     navItems,
 *     pathname,
 *   });
 *
 *   return (
 *     <Tree
 *       {...tree}
 *       aria-label="Navigation"
 *       linkComponent={Link}
 *     />
 *   );
 * }
 * ```
 *
 * @since 6.0.0 Renamed from `useLayoutNavigation`.
 */ export function useLayoutTree(options) {
    const { defaultExpandedIds, navItems, pathname } = options;
    const selectedIds = useMemo(()=>new Set([
            pathname
        ]), [
        pathname
    ]);
    const { expandedIds, expandMultipleTreeItems, toggleTreeItemExpansion } = useTreeExpansion(defaultExpandedIds ?? (()=>getParentIds(pathname, navItems)));
    useEffect(()=>{
        expandMultipleTreeItems((prevExpandedIds)=>{
            const nextExpandedIds = new Set([
                ...prevExpandedIds,
                ...getParentIds(pathname, navItems)
            ]);
            return nextExpandedIds;
        });
    }, [
        expandMultipleTreeItems,
        pathname,
        navItems
    ]);
    return {
        data: navItems,
        multiSelect: false,
        selectedIds,
        expandedIds,
        expandMultipleTreeItems,
        toggleTreeItemExpansion,
        toggleTreeItemSelection: noop,
        selectMultipleTreeItems: noop
    };
}

//# sourceMappingURL=useLayoutTree.js.map