import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { createElement as _createElement } from "@emotion/react";
import React, { useRef } from "react";
import AutoSize from "react-virtualized-auto-sizer";
import { Tree } from "react-arborist";
import { CustomCursor } from "../components/custom-cursor";
import { Node } from "./PageTreeItem";
import { css } from "@emotion/react";
import TreeModel from "tree-model-improved";
export function findById(node, id) {
    return node.first((n) => n.model.id === id);
}
export const indent = 17;
function PageMenuTree(props) {
    const data = props.data;
    const [pageData, setPageData] = React.useState(data);
    const root = React.useMemo(() => {
        return new TreeModel().parse(pageData);
    }, [pageData]);
    const find = React.useCallback((id) => findById(root, id), [root]);
    const update = React.useCallback(() => setPageData(Object.assign({}, root.model)), [root.model]);
    React.useEffect(() => setPageData(data), [data]);
    const onToggle = React.useCallback((id, isOpen) => {
        const node = find(id);
        if (node) {
            node.model.isOpen = isOpen;
            update();
        }
    }, [update]);
    const onMove = React.useCallback((srcIds, dstParentId, dstIndex) => {
        for (const srcId of srcIds) {
            const src = find(srcId);
            const dstParent = dstParentId ? find(dstParentId) : root;
            if (!src || !dstParent)
                return;
            props.onDrop(srcId, dstParentId, dstIndex);
            const newItem = new TreeModel().parse(src.model);
            dstParent.addChildAtIndex(newItem, dstIndex);
            src.drop();
        }
        update();
    }, [update]);
    const onEdit = React.useCallback((id, name) => {
        const node = find(id);
        if (node) {
            node.model.name = name;
            update();
        }
    }, [update]);
    const tree = useRef(null);
    React.useEffect(() => {
        var _a;
        (_a = tree.current) === null || _a === void 0 ? void 0 : _a.scrollToId(props.activeComponent);
    }, [props.activeComponent]);
    const rootElement = useRef(null);
    return (_jsx("div", Object.assign({ ref: rootElement, style: { height: "100%", width: "100%" } }, { children: _jsx(AutoSize, { children: (sizeProps) => (_jsx(Tree, Object.assign({ ref: tree, getChildren: "children", isOpen: "isOpen", hideRoot: true, indent: indent, data: pageData, onEdit: (id, name) => {
                    onEdit(id, name);
                    props.onBlurRenameItem(name, id);
                }, onMove: onMove, onToggle: onToggle, rowHeight: 33, width: sizeProps.width, height: sizeProps.height - 40, dndRootElement: undefined, dropCursor: (props) => _jsx(CustomCursor, Object.assign({}, props)), css: css `
              padding-bottom: 50px;
              ::-webkit-scrollbar {
                width: 6px;
                height: 8px;
              }

              ::-webkit-scrollbar-thumb {
                background: rgba(0, 0, 0, 0.2);
                border-radius: 4px;
              }
            ` }, { children: (data) => (_createElement(Node, Object.assign({}, data, { compWidth: sizeProps.width, key: data.data.id, onDragEnd: props.onDragEnd, componentToEditID: props.componentToEditID, components: props.components, onRemoveComponent: props.onRemoveComponent, onSetActiveComponent: props.onSetActiveComponent, activeComponent: props.activeComponent, renderLayoutComponentsMenu: props.renderLayoutComponentsMenu, layer1: props.layer1, onMoveToLayout: props.onMoveToLayout }))) }))) }) })));
}
export default PageMenuTree;
//# sourceMappingURL=PageMenuTree.js.map