// TODO: Figure out how to strictly enforce the data
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
/**
 * This is the default implementation for {@link RenderRecursivelyProps.getItemKey}.
 *
 * ```ts
 * return `${options.depth}-${options.index}`
 * ```
 *
 * @since 6.0.0
 */ export function getRecursiveItemKey(options) {
    const { depth, index } = options;
    return `${depth}-${index}`;
}
/**
 * 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
 * "use client";
 *
 * import { Box } from "@react-md/core/box/Box";
 * import { Button } from "@react-md/core/button/Button";
 * import { Divider } from "@react-md/core/divider/Divider";
 * import { List } from "@react-md/core/list/List";
 * import { useCollapseTransition } from "@react-md/core/transition/useCollapseTransition";
 * import {
 *   type DefaultTreeItemNode,
 *   type TreeData,
 * } from "@react-md/core/tree/types";
 * import { type UseStateSetter } from "@react-md/core/types";
 * import { useToggle } from "@react-md/core/useToggle";
 * import {
 *   type RenderRecursiveItemsProps,
 *   RenderRecursively,
 * } from "@react-md/core/utils/RenderRecursively";
 * import { type ReactElement, useState } from "react";
 *
 * interface Data {
 *   activeId: string;
 *   setActiveId: UseStateSetter<string>;
 * }
 *
 * export default function SimpleExample(): ReactElement {
 *   const [activeId, setActiveId] = useState("/");
 *   return (
 *     <Box fullWidth disableWrap>
 *       <Box stacked align="stretch">
 *         <RenderRecursively
 *           // this is optional and can be any sort of info
 *           data={{ activeId, setActiveId }}
 *           items={Object.values(navItems)}
 *           render={Render}
 *         />
 *       </Box>
 *       <div>Active route: {activeId}</div>
 *     </Box>
 *   );
 * }
 *
 * 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 Render(
 *   props: RenderRecursiveItemsProps<DefaultTreeItemNode, Data>
 * ): ReactElement {
 *   const {
 *     item,
 *     parents,
 *     // this is passed down from the root `RenderRecursively`
 *     data,
 *     // this _might_ be defined based on the implementation. it's set to any
 *     // renderable element
 *     children: _children,
 *   } = props;
 *   if (item.itemId.includes("divider")) {
 *     return <Divider />;
 *   }
 *
 *   if (item.items) {
 *     return <NestedNavigation {...props} />;
 *   }
 *
 *   const prefix = parents.map((parent) => parent.itemId).join("/");
 *   const currentId = `${prefix}${item.itemId}`;
 *   // I haven't figured out how to manage the type safety of this yet
 *   const active = data?.activeId === currentId;
 *   // this would normally be a link, but to keep the demo simple, it's a button
 *   return (
 *     <Button
 *       theme={active ? "primary" : "clear"}
 *       themeType={active ? "contained" : "flat"}
 *       onClick={() => {
 *         data?.setActiveId(currentId);
 *       }}
 *       style={{ justifyContent: "flex-start" }}
 *     >
 *       {item.children}
 *     </Button>
 *   );
 * }
 *
 * function NestedNavigation(
 *   props: RenderRecursiveItemsProps<DefaultTreeItemNode, Data>
 * ): ReactElement {
 *   const {
 *     item,
 *     parents: _parents,
 *     // this is passed down from the root `RenderRecursively`
 *     data: _data,
 *     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>
 *   );
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/render-recursively | RenderRecursively Demos}
 * @since 6.0.0
 */ export function RenderRecursively(props) {
    const { data, items, render: Render, getItemKey = getRecursiveItemKey, 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({
                item,
                depth,
                index
            }));
        })
    });
}

//# sourceMappingURL=RenderRecursively.js.map