"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from "react";
import { useElementInteraction } from "../interaction/useElementInteraction.js";
import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
import { ListItemChildren } from "../list/ListItemChildren.js";
import { useKeyboardMovementContext } from "../movement/useKeyboardMovementProvider.js";
import { useEnsuredId } from "../useEnsuredId.js";
import { TreeGroup } from "./TreeGroup.js";
import { TreeItemExpander } from "./TreeItemExpander.js";
import { useTreeContext } from "./TreeProvider.js";
import { treeItem, treeItemContent, treeItemMedia } from "./styles.js";
/**
 * **Client Component**
 *
 * @see {@link https://react-md.dev/components/tree | Tree Demos}
 * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/treeview/}
 * @since 6.0.0 No longer forwards refs. The ref must be provided using
 * `contentRef` instead.
 * @since 6.0.0 The `liRef` was removed in favor of `liProps={{ ref }}`.
 * @since 6.0.0 The wrapping `<li>` element will always be `role="none"` and the
 * `<span>` or `<a>` will gain the `role="treeitem"` instead. This makes it
 * easier to pass event handlers because of the nested behavior of tree items.
 * @since 6.0.0 No longer provides the `aria-level`, `aria-setsize` and
 * `aria-posinset` attributes and allows the browser to compute them instead.
 */ export function TreeItem(props) {
    const { id: propId, depth, liProps, disabled = false, disabledOpacity = false, groupProps, children: propChildren, className, itemId, leftAddon, leftAddonType: propLeftAddonType, leftAddonPosition, leftAddonClassName, leftAddonForceWrap, rightAddon, rightAddonType, rightAddonPosition, rightAddonClassName, rightAddonForceWrap, disableTextChildren, disableLeftAddonCenteredMedia: propDisableLeftAddonCenteredMedia, disableRightAddonCenteredMedia, textProps, textClassName, primaryText, secondaryText, secondaryTextProps, secondaryTextClassName, multiline, childItems, contentClassName, temporaryChildItems, disableTransition: propDisableTransition, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, contentRef, disableRipple, ...remaining } = props;
    const id = useEnsuredId(propId, "tree-item");
    const children = useHigherContrastChildren(propChildren);
    if (disabled) {
        // you can't really disable a link other than removing the href, so
        // unset these props
        remaining.to = undefined;
        remaining.href = undefined;
    }
    const { expandedIds, selectedIds, expanderLeft, expansionMode, metadataLookup, linkComponent: Link, toggleTreeItemSelection, toggleTreeItemExpansion, disableTransition: contextDisableTransition } = useTreeContext();
    const { activeDescendantId } = useKeyboardMovementContext();
    const isLeafNode = !childItems;
    const focused = activeDescendantId === id;
    const expanded = expandedIds.has(itemId);
    const selected = selectedIds.has(itemId);
    const disableTransition = propDisableTransition ?? contextDisableTransition;
    useEffect(()=>{
        const lookup = metadataLookup.current;
        lookup.expandable[itemId] = !isLeafNode;
        lookup.disabledItems[itemId] = disabled;
        lookup.elementToItem[id] = itemId;
        lookup.itemToElement[itemId] = id;
        return ()=>{
            /* eslint-disable @typescript-eslint/no-dynamic-delete */ delete lookup.disabledItems[itemId];
            delete lookup.expandable[itemId];
            delete lookup.elementToItem[id];
            delete lookup.itemToElement[itemId];
        /* eslint-enable @typescript-eslint/no-dynamic-delete */ };
    }, [
        id,
        metadataLookup,
        itemId,
        isLeafNode,
        disabled,
        depth
    ]);
    const { pressedClassName, ripples, handlers } = useElementInteraction({
        mode: disableRipple ? "none" : undefined,
        onBlur,
        onClick (event) {
            onClick?.(event);
            toggleTreeItemSelection(itemId);
            if (!isLeafNode && expansionMode !== "manual") {
                toggleTreeItemExpansion(itemId);
            }
        },
        onKeyDown,
        onKeyUp,
        onMouseDown,
        onMouseUp,
        onMouseLeave,
        onDragStart,
        onTouchStart,
        onTouchEnd,
        onTouchMove,
        disabled
    });
    const isLink = !!(remaining.to || remaining.href);
    // cheating a bit so there are type errors around the event handlers
    const ContentComponent = isLink ? Link : "span";
    const leftAddonType = propLeftAddonType ?? (expanderLeft && leftAddon) ? "media" : undefined;
    const isMediaLeftAddon = typeof propLeftAddonType === "undefined" && leftAddonType === "media";
    const disableLeftAddonCenteredMedia = propDisableLeftAddonCenteredMedia ?? isMediaLeftAddon;
    return /*#__PURE__*/ _jsxs("li", {
        ...liProps,
        role: "none",
        className: treeItem({
            className,
            expander: !!childItems,
            expanderLeft
        }),
        children: [
            /*#__PURE__*/ _jsxs(ContentComponent, {
                ...remaining,
                // nodes with children should always apply the `aria-expanded` to show
                // that it is expandable while leaf nodes should remain omitted
                "aria-expanded": isLeafNode ? undefined : expanded,
                "aria-selected": selected,
                "aria-disabled": disabled || undefined,
                id: id,
                ref: contentRef,
                role: "treeitem",
                tabIndex: -1,
                ...handlers,
                className: treeItemContent({
                    link: isLink,
                    focused,
                    selected,
                    disabled,
                    disabledOpacity,
                    className: contentClassName,
                    pressedClassName
                }),
                children: [
                    /*#__PURE__*/ _jsx(ListItemChildren, {
                        multiline: multiline,
                        textClassName: textClassName,
                        secondaryTextClassName: secondaryTextClassName,
                        disableTextChildren: disableTextChildren,
                        primaryText: primaryText,
                        textProps: textProps,
                        secondaryText: secondaryText,
                        secondaryTextProps: secondaryTextProps,
                        leftAddon: /*#__PURE__*/ _jsx(TreeItemExpander, {
                            isLeft: true,
                            itemId: itemId,
                            addon: leftAddon,
                            expanded: expanded,
                            disabled: disabled,
                            isLeafNode: isLeafNode
                        }),
                        leftAddonType: leftAddonType,
                        leftAddonPosition: leftAddonPosition,
                        leftAddonClassName: treeItemMedia({
                            isLeafNode,
                            isMediaLeftAddon,
                            className: leftAddonClassName
                        }),
                        leftAddonForceWrap: leftAddonForceWrap,
                        rightAddon: /*#__PURE__*/ _jsx(TreeItemExpander, {
                            itemId: itemId,
                            addon: rightAddon,
                            expanded: expanded,
                            disabled: disabled,
                            isLeafNode: isLeafNode
                        }),
                        rightAddonType: rightAddonType,
                        rightAddonPosition: rightAddonPosition,
                        rightAddonClassName: rightAddonClassName,
                        rightAddonForceWrap: rightAddonForceWrap,
                        disableLeftAddonCenteredMedia: disableLeftAddonCenteredMedia,
                        disableRightAddonCenteredMedia: disableRightAddonCenteredMedia,
                        children: children
                    }),
                    ripples
                ]
            }),
            /*#__PURE__*/ _jsx(TreeGroup, {
                id: `${id}-group`,
                temporary: temporaryChildItems,
                disableTransition: disableTransition,
                ...groupProps,
                depth: depth + 1,
                collapsed: isLeafNode || !expanded,
                children: childItems
            })
        ]
    });
}

//# sourceMappingURL=TreeItem.js.map