import React, { useRef } from "react";
import { safeUseId, isEmpty } from "../../../../../utils";
import { FloatingPopover } from "../../FloatingPopover";
import { Ul, ListWrapper } from "../../Combobox.styles";
import { Item } from "./ui";
export var Inner = function Inner1(param) {
    var item = param.item, currentLevel = param.currentLevel, path = param.path, dispatchPath = param.dispatchPath, index = param.index, listWidth = param.listWidth, portal = param.portal, shift = param.shift, flip = param.flip;
    var handleToggle = function 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
            });
        }
    };
    var listWrapperRef = useRef(null);
    var isCurrentListOpen = path[currentLevel + 1] === item.value.toString();
    var treeId = safeUseId();
    var listId = "".concat(treeId, "_tree_level_").concat(currentLevel + 2);
    var nextLevel = currentLevel + 1;
    if (!isEmpty(item === null || item === void 0 ? void 0 : item.items)) {
        var _item_items;
        return /*#__PURE__*/ React.createElement(FloatingPopover, {
            placement: (item === null || item === void 0 ? void 0 : item.placement) || 'right-start',
            opened: isCurrentListOpen,
            onToggle: handleToggle,
            target: /*#__PURE__*/ React.createElement(Item, {
                item: item,
                path: path,
                currentLevel: currentLevel,
                index: index,
                ariaControls: listId,
                ariaExpanded: isCurrentListOpen,
                ariaLevel: nextLevel,
                ariaLabel: item.label
            }),
            isInner: true,
            portal: portal,
            shift: shift,
            flip: flip
        }, /*#__PURE__*/ React.createElement(ListWrapper, {
            listWidth: listWidth,
            ref: listWrapperRef
        }, /*#__PURE__*/ React.createElement(Ul, {
            role: "group",
            id: listId,
            virtual: false,
            listMaxHeight: item === null || item === void 0 ? void 0 : item.listMaxHeight
        }, (_item_items = item.items) === null || _item_items === void 0 ? void 0 : _item_items.map(function(innerItem, innerIndex) {
            return /*#__PURE__*/ React.createElement(Inner, {
                key: "".concat(innerIndex, "/").concat(currentLevel),
                item: innerItem,
                currentLevel: nextLevel,
                path: path,
                dispatchPath: dispatchPath,
                index: innerIndex,
                listWidth: listWidth,
                portal: listWrapperRef,
                shift: shift,
                flip: flip
            });
        }))));
    }
    return /*#__PURE__*/ React.createElement(Item, {
        item: item,
        path: path,
        index: index,
        currentLevel: currentLevel,
        ariaLevel: nextLevel
    });
};
