import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { editorCn } from "../../utils/cn.js";
import { DragContextProvider } from "./DragContext.js";
import { TreeContent } from "./TreeContent.js";
import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
import { Button, Icon } from '@gravity-ui/uikit';
import { TrashBin } from '@gravity-ui/icons';
import { generateChildrenPathFromArray, getItemTitle } from "../../utils/index.js";
import './Tree.css';
const b = editorCn('tree');
const generateTree = (items) => {
    return items.map((item) => {
        let children;
        if ('children' in item && item.children?.length) {
            children = generateTree(item.children);
        }
        return {
            type: item.type,
            children,
            treeTitle: getItemTitle(item),
        };
    });
};
const Tree = ({ className }) => {
    const { content, resetBlocks, selectedBlock, duplicateBlock, deleteBlock, setSelectedBlock, reorderBlock, } = useMainEditorStore();
    const selectedBlockPath = React.useMemo(() => {
        return generateChildrenPathFromArray(selectedBlock || []);
    }, [selectedBlock]);
    return (_jsx(DragContextProvider, { children: _jsxs("div", { className: b(null, className), children: [_jsx("div", { className: b('head'), children: _jsxs(Button, { view: "outlined-danger", onClick: () => resetBlocks(), children: [_jsx(Icon, { data: TrashBin }), "Clear all"] }) }), _jsx(TreeContent, { reorderBlock: reorderBlock, onCopy: duplicateBlock, onDelete: deleteBlock, onSelect: setSelectedBlock, blockTree: generateTree(content.blocks), selectedBlockPath: selectedBlockPath })] }) }));
};
export default Tree;
//# sourceMappingURL=Tree.js.map
