"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TreeItem = TreeItem;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const sortable_1 = require("@dnd-kit/react/sortable");
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const components_1 = require("../../../components/index.js");
const cn_1 = require("../../utils/cn.js");
const b = (0, cn_1.editorCn)('tree-item');
const sortableConfig = {
    alignment: {
        x: 'start',
        y: 'center',
    },
    transition: null,
};
function TreeItem({ item, sortableIndex, indentLeft, selected, type, treeTitle, path, onCopy, onDelete, onSelect, }) {
    const { depth, parentId, id } = item;
    const { ref, isDragSource, isDropTarget } = (0, sortable_1.useSortable)({
        ...sortableConfig,
        id,
        index: sortableIndex,
        data: {
            depth,
            parentId,
        },
    });
    const [mouseDownPos, setMouseDownPos] = React.useState(null);
    const itemRef = React.useRef(null);
    React.useLayoutEffect(() => {
        if (selected && itemRef.current) {
            itemRef.current.scrollIntoView({
                behavior: 'smooth',
                block: 'nearest',
            });
        }
    }, [selected]);
    const setNodeRef = React.useCallback((node) => {
        ref(node);
        itemRef.current =
            node;
    }, [ref]);
    const handleMouseDown = React.useCallback((e) => {
        setMouseDownPos({ x: e.clientX, y: e.clientY });
    }, []);
    const handleMouseUp = React.useCallback((e) => {
        if (mouseDownPos) {
            const dx = Math.abs(e.clientX - mouseDownPos.x);
            const dy = Math.abs(e.clientY - mouseDownPos.y);
            if (dx < 5 && dy < 5) {
                e.stopPropagation();
                onSelect(path);
            }
        }
        setMouseDownPos(null);
    }, [mouseDownPos, onSelect, path]);
    return ((0, jsx_runtime_1.jsx)(uikit_1.Card, { ref: setNodeRef, className: b({
            selected,
            dragging: isDragSource,
            'drag-over': isDropTarget,
        }), style: { marginLeft: indentLeft }, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, children: (0, jsx_runtime_1.jsxs)("div", { className: b('main'), children: [(0, jsx_runtime_1.jsxs)("div", { className: b('text'), children: [(0, jsx_runtime_1.jsx)("div", { className: b('type'), children: type }), (0, jsx_runtime_1.jsx)(components_1.HTML, { className: b('title'), children: treeTitle })] }), (0, jsx_runtime_1.jsxs)("div", { className: b('buttons'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: "xs", onClick: () => onCopy(path), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { size: 12, data: icons_1.Copy }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: "xs", onClick: () => onDelete(path), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { size: 12, data: icons_1.TrashBin }) })] })] }) }));
}
//# sourceMappingURL=TreeItem.js.map
