// TODO: Figure out how to strictly enforce the data
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
/**
 * Helper component for recursively rendering specific data structures (mostly
 * trees). The main use-case is for rendering site navigation and the `Tree`
 * component.
 *
 * @example
 * ```tsx
 * import {
 *   buildTree,
 *   List,
 *   ListItem,
 *   ListItemLink,
 *   RenderRecursively,
 *   TreeData,
 *   type DefaultTreeItemNode,
 *   type RenderRecursiveItemsProps,
 * } from "@react-md/core";
 * import { type ReactElement } from "react";
 *
 * const navItems = {
 *   "/": {
 *     href: "/",
 *     itemId: "/",
 *     parentId: null,
 *     children: "Home",
 *   },
 *   "/route-1": {
 *     itemId: "/route-1",
 *     parentId: null,
 *     children: "Collapsible",
 *   },
 *   "/nested-route-1": {
 *     itemId: "/nested-route-1",
 *     parentId: "/route-1",
 *     children: "Child 1",
 *   },
 *   "/nested-route-2": {
 *     itemId: "/nested-route-2",
 *     parentId: "/route-2",
 *     children: "Child 2",
 *   },
 *   "/divider-1": {
 *     itemId: "/divider-1",
 *     parentId: null
 *   },
 *   "/route-2": {
 *     itemId: "/route-2"
 *     parentId: null,
 *     children: "Route 2",
 *   },
 * } satisfies TreeData;
 *
 * function NestedNavigation(props: RenderRecursiveItemsProps<DefaultTreeItemNode>): ReactElement {
 *   const { item, parents, children } = props;
 *   const { toggle, toggled: collapsed } = useToggle(false);
 *   const { elementProps } = useCollapseTransition({
 *     transitionIn: !collapsed,
 *   });
 *
 *   return (
 *     <li>
 *       <Button onClick={toggle}>{item.children}</Button>
 *       <List {...elementProps}>{children}</List>
 *     </li>
 *   ):
 * }
 *
 *
 * function Render(props: RenderRecursiveItemsProps<DefaultTreeItemNode>): ReactElement {
 *   const { item, parents } = props;
 *   if (item.itemId.includes("divider")) {
 *     return <Divider />;
 *   }
 *
 *   if (item.items) {
 *     return <NestedNavigation {...props} />
 *   }
 *
 *   const prefix = parents.map((parent) => parent.itemId).join("/");
 *   return (
 *     <Link href={`${prefix}${item.itemId}`}>
 *       {item.children}
 *     </Link>
 *   );
 * }
 * ```
 *
 *
 * @remarks \@since 6.0.0
 */ export function RenderRecursively(props) {
    const { data, items, render: Render, getItemKey, parents = [] } = props;
    return /*#__PURE__*/ _jsx(_Fragment, {
        children: items.map((item, index)=>{
            let children;
            const depth = parents.length;
            if (item.items?.length) {
                children = /*#__PURE__*/ _jsx(RenderRecursively, {
                    data: data,
                    items: item.items,
                    render: Render,
                    getItemKey: getItemKey,
                    parents: [
                        ...parents,
                        item
                    ]
                });
            }
            return /*#__PURE__*/ _jsx(Render, {
                // typecast since it should be undefined in renderer as well?
                data: data,
                item: item,
                parents: parents,
                children: children
            }, getItemKey ? getItemKey(item) : `${depth}-${index}`);
        })
    });
}

//# sourceMappingURL=RenderRecursively.js.map