import { jsx as _jsx } from "react/jsx-runtime";
import { Children, useEffect, useMemo } from 'react';
import { styled, useStyleConfig, vui } from '../core';
import { List } from '../list';
import { cs, filterUndefined } from '../utils';
import { TreeProvider } from './context';
import TreeIcon from './treeIcon';
import TreeItem from './treeItem';
import TreeText from './treeText';
import { useTreeState } from './useTreeState';
export const TreeBase = styled.divBox `
  display: flex;
  height: auto;
  align-content: flex-start;
  flex-direction: column;
`;
/** Displays a tree of tree link items and optional heading. Exposes some props to the children via context. */
export const Tree = vui((props, ref) => {
    const { activeItemId, children, className, iconCollapse, iconExpand, items, onClickItem, size, variant, ...rest } = props;
    const styles = useStyleConfig('Tree', props);
    const { itemsInternal, setItemsInternal, activeItemIndex, setActiveItemIndex } = useTreeState(activeItemId);
    const context = useMemo(() => filterUndefined({ size, variant }), [size, variant]);
    const iconCollapseInternal = iconCollapse ? iconCollapse : variant === 'default' ? 'falAngleRight' : 'falMinus';
    const iconExpandInternal = iconExpand ? iconExpand : variant === 'default' ? 'falAngleDown' : 'falPlus';
    const transformChildrenToItems = (children) => {
        const t = [];
        if (children) {
            ;
            Children.toArray(children).forEach((child, index) => {
                if (child?.props?.text) {
                    let items = [];
                    if (child.props.children) {
                        items = transformChildrenToItems(child.props.children);
                    }
                    t.push({
                        id: child.props.id,
                        text: child.props.text,
                        isActive: child.props.isActive,
                        items: child.props.items || items,
                        isCollapsed: child.props.isCollapsed,
                        disabled: child.props.disabled,
                        onClickTreeItem: onClickTreeItem,
                    });
                }
            });
        }
        return t;
    };
    useEffect(() => {
        if (items) {
            setItemsInternal(items);
            return;
        }
        const t = [];
        if (children) {
            const transformed = transformChildrenToItems(children);
            t.push(...transformed);
        }
        setItemsInternal(t);
        if (activeItemId !== undefined && t?.find((i) => i.id === activeItemId)) {
            setActiveItemIndex(activeItemId);
        }
    }, [children, activeItemId]);
    const onClickTreeItem = (id) => {
        setActiveItemIndex(id);
        if (onClickItem) {
            onClickItem(id);
        }
    };
    return (_jsx(TreeProvider, { value: context, children: _jsx(TreeBase, { className: cs('vui-tree', className), ref: ref, ...styles.container, ...rest, children: _jsx(List, { role: "tree", w: 1, children: itemsInternal?.map(({ id, isActive, ...props }, index) => {
                    return (_jsx(TreeItem, { activeItemIndex: activeItemIndex, iconCollapse: iconCollapseInternal, iconExpand: iconExpandInternal, id: id, isActive: isActive ? isActive : activeItemIndex ? activeItemIndex === id : false, isFirstLevel: true, onClickTreeItem: onClickTreeItem, ...props }, id ?? index));
                }) }) }) }));
});
Tree.Icon = TreeIcon;
Tree.Item = TreeItem;
Tree.Text = TreeText;
Tree.displayName = 'Tree';
export default Tree;
//# sourceMappingURL=tree.js.map