import React, { useRef } from "react";
import { safeUseId } from "../../../../utils";
import { Ul, ListWrapper } from "../../Dropdown.styles";
import { FloatingPopover } from "../../FloatingPopover";
import { getPlacement } from "../../utils";
import { Item } from "./ui";
const Inner = ({ item, currentLevel, path, dispatchPath, index, trigger, listWidth, portal })=>{
    const handleToggle = (opened)=>{
        if (opened) {
            dispatchPath({
                type: 'changed_on_level',
                value: item.value.toString(),
                level: currentLevel + 1
            });
        } else {
            dispatchPath({
                type: 'cut_by_level',
                level: currentLevel + 1
            });
        }
    };
    const listWrapperRef = useRef(null);
    const isCurrentListOpen = path[currentLevel + 1] === item.value.toString();
    const treeId = safeUseId();
    const listId = `${treeId}_tree_level_${currentLevel + 2}`;
    const nextLevel = currentLevel + 1;
    if (item?.items?.length) {
        return /*#__PURE__*/ React.createElement(FloatingPopover, {
            placement: getPlacement(item?.placement || 'right'),
            opened: isCurrentListOpen,
            onToggle: handleToggle,
            trigger: item.trigger || trigger,
            target: /*#__PURE__*/ React.createElement(Item, {
                item: item,
                index: index,
                path: path,
                currentLevel: currentLevel,
                ariaControls: listId,
                ariaExpanded: isCurrentListOpen,
                ariaLevel: nextLevel,
                ariaLabel: item.label
            }),
            isInner: true,
            portal: portal
        }, /*#__PURE__*/ React.createElement(ListWrapper, {
            ref: listWrapperRef,
            listWidth: listWidth
        }, /*#__PURE__*/ React.createElement(Ul, {
            id: listId,
            role: "group",
            listMaxHeight: item.listMaxHeight
        }, item.beforeList, item.items.map((innerItem, innerIndex)=>/*#__PURE__*/ React.createElement(Inner, {
                key: `${innerIndex}/${currentLevel}`,
                item: innerItem,
                currentLevel: nextLevel,
                path: path,
                dispatchPath: dispatchPath,
                index: innerIndex,
                trigger: trigger,
                listWidth: listWidth,
                portal: listWrapperRef
            })))));
    }
    return /*#__PURE__*/ React.createElement(Item, {
        item: item,
        path: path,
        index: index,
        currentLevel: currentLevel,
        ariaLevel: nextLevel
    });
};
export { Inner };
