import React, { useRef } from "react";
import { safeUseId } from "../../../../utils";
import { DropdownItem } from "../DropdownItem/DropdownItem";
import { Ul, ListWrapper } from "../../Dropdown.styles";
import { FloatingPopover } from "../../FloatingPopover";
import { getPlacement } from "../../utils";
var DropdownInner = function DropdownInner1(param) {
    var item = param.item, currentLevel = param.currentLevel, path = param.path, dispatchPath = param.dispatchPath, index = param.index, trigger = param.trigger, listWidth = param.listWidth, portal = param.portal;
    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 (item === null || item === void 0 ? void 0 : item.items) {
        return /*#__PURE__*/ React.createElement(FloatingPopover, {
            placement: getPlacement((item === null || item === void 0 ? void 0 : item.placement) || 'right'),
            opened: isCurrentListOpen,
            onToggle: handleToggle,
            trigger: item.trigger || trigger,
            target: /*#__PURE__*/ React.createElement(DropdownItem, {
                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(function(innerItem, innerIndex) {
            return /*#__PURE__*/ React.createElement(DropdownInner, {
                key: "".concat(innerIndex, "/").concat(currentLevel),
                item: innerItem,
                currentLevel: nextLevel,
                path: path,
                dispatchPath: dispatchPath,
                index: innerIndex,
                trigger: trigger,
                listWidth: listWidth,
                portal: listWrapperRef
            });
        }))));
    }
    return /*#__PURE__*/ React.createElement(DropdownItem, {
        item: item,
        path: path,
        index: index,
        currentLevel: currentLevel,
        ariaLevel: nextLevel
    });
};
export { DropdownInner };
