(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "tslib", "react", "@greenatom/icons", "../../../hooks/useStateProps", "../../styles", "../../Tree"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var tslib_1 = require("tslib");
    var react_1 = (0, tslib_1.__importStar)(require("react"));
    var icons_1 = require("@greenatom/icons");
    var useStateProps_1 = require("../../../hooks/useStateProps");
    var styles_1 = require("../../styles");
    var Tree_1 = require("../../Tree");
    var TreeItem = function (_a) {
        var title = _a.title, children = _a.children, icon = _a.icon, isArrow = _a.isArrow, isActive = _a.isActive, className = _a.className, isDisabled = _a.isDisabled, onClick = _a.onClick, elements = _a.elements, id = _a.id, leadContent = _a.leadContent, setActive = _a.setActive, otherProps = (0, tslib_1.__rest)(_a, ["title", "children", "icon", "isArrow", "isActive", "className", "isDisabled", "onClick", "elements", "id", "leadContent", "setActive"]);
        var _b = (0, tslib_1.__read)((0, useStateProps_1.useStateProps)(isArrow), 2), isShown = _b[0], setIsShown = _b[1];
        var _c = (0, tslib_1.__read)((0, react_1.useState)(false), 2), isHover = _c[0], setIsHover = _c[1];
        var _d = (0, tslib_1.__read)((0, react_1.useState)(title), 2), titleState = _d[0], setTitleState = _d[1];
        var _e = (0, tslib_1.__read)((0, react_1.useState)({
            x: 0,
            y: 0
        }), 2), draggedItemPosition = _e[0], setDraggedItemPosition = _e[1];
        var _f = (0, react_1.useContext)(Tree_1.TreeContext), draggedOverId = _f.draggedOverId, currentlyDraggedId = _f.currentlyDraggedId, isDragAllowed = _f.isDragAllowed, isEditAllowed = _f.isEditAllowed, handleChangeTitle = _f.handleChangeTitle, handleDragStart = _f.handleDragStart, handleDrop = _f.handleDrop, handleDragOver = _f.handleDragOver;
        var dropRef = (0, react_1.useRef)(handleDrop);
        dropRef.current = handleDrop;
        var dragRef = (0, react_1.useRef)(false);
        var thisTreeItem = {
            icon: icon,
            className: className,
            children: children,
            id: id,
            isActive: isActive,
            isArrow: isArrow,
            isDisabled: isDisabled,
            title: title
        };
        var isDragging = currentlyDraggedId === id;
        var dragTimer;
        var handleClickShown = function () {
            if (!elements || isDisabled) {
                return;
            }
            setIsShown(!isShown);
        };
        var handleClick = function () {
            onClick === null || onClick === void 0 ? void 0 : onClick(thisTreeItem);
        };
        var handleItemTitleChange = function (newTitle) {
            if (isEditAllowed) {
                setTitleState(newTitle);
            }
        };
        var handleMouseDown = function (e) {
            if (!isDragAllowed) {
                return;
            }
            var target = e.target;
            if (target instanceof HTMLElement) {
                e.preventDefault();
                dragRef.current = true;
                setDraggedItemPosition({ x: e.clientX, y: e.clientY });
                dragTimer = setTimeout(function () {
                    if (dragRef.current) {
                        handleDragStart === null || handleDragStart === void 0 ? void 0 : handleDragStart(thisTreeItem);
                    }
                }, 200);
                window.addEventListener("mousemove", handleMouseMove);
                window.addEventListener("mouseup", handleMouseUp);
            }
        };
        var handleMouseMove = function (e) {
            if (dragRef.current) {
                setDraggedItemPosition({ x: e.clientX, y: e.clientY });
            }
        };
        var handleMouseUp = function () {
            var _a;
            dragRef.current = false;
            (_a = dropRef.current) === null || _a === void 0 ? void 0 : _a.call(dropRef);
            if (dragTimer) {
                clearTimeout(dragTimer);
            }
            window.removeEventListener("mousemove", handleMouseMove);
            window.removeEventListener("mouseup", handleMouseUp);
        };
        return (react_1.default.createElement(styles_1.TreeWrapper, (0, tslib_1.__assign)({ onClick: handleClick, className: className, id: String(id), isDragOver: draggedOverId === id, isDragging: isDragging }, otherProps),
            react_1.default.createElement(styles_1.TreeHeader, { isDisabled: isDisabled, isDragAllowed: isDragAllowed, isAnyDragging: currentlyDraggedId !== undefined, className: "tree_header", isActive: isShown || isActive || false, onClick: handleClickShown, onMouseMove: function () { return !isDisabled && !dragRef.current && setIsHover(true); }, onMouseOut: function () { return !isDisabled && !dragRef.current && setIsHover(false); }, onMouseDown: handleMouseDown, style: isDragging
                    ? {
                        left: draggedItemPosition === null || draggedItemPosition === void 0 ? void 0 : draggedItemPosition.x,
                        top: draggedItemPosition === null || draggedItemPosition === void 0 ? void 0 : draggedItemPosition.y
                    }
                    : undefined, onMouseEnter: function () {
                    return !isDisabled && !dragRef.current && (handleDragOver === null || handleDragOver === void 0 ? void 0 : handleDragOver(thisTreeItem));
                } },
                ((elements && (elements === null || elements === void 0 ? void 0 : elements.length) > 0) || isDragging) && (react_1.default.createElement(styles_1.IconWrapper, { isShown: isShown }, isDragging ? (react_1.default.createElement(icons_1.IconBrokenDrag2, { width: 16, height: 16 })) : (react_1.default.createElement(icons_1.IconBrokenArrowRight3, { className: "arrow-icon", width: 16, height: 16 })))),
                !isDragging && leadContent,
                react_1.default.createElement(styles_1.Title, { readOnly: !isEditAllowed || isDragging || currentlyDraggedId !== undefined, disabled: isDisabled, className: "tree-header__title", value: titleState, onClick: function (e) { return e.stopPropagation(); }, onMouseDown: function (e) { return e.stopPropagation(); }, onChange: function (e) { return handleItemTitleChange(e.target.value); }, onBlur: function () { return handleChangeTitle === null || handleChangeTitle === void 0 ? void 0 : handleChangeTitle(thisTreeItem, titleState); } }),
                !isDisabled && icon && (isShown || isHover || isActive) && (react_1.default.createElement("div", { className: "tree-header__right-content" }, icon && react_1.default.createElement(styles_1.IconWrapper, null, icon)))),
            isShown && !isDragging && (react_1.default.createElement(styles_1.TreeList, null, elements &&
                elements.length > 0 &&
                elements.map(function (element) { return (react_1.default.createElement(TreeItem, { id: element.id, key: element.id || String(element.title), title: element.title, isDisabled: (element === null || element === void 0 ? void 0 : element.isDisabled) === true, isActive: (element === null || element === void 0 ? void 0 : element.isActive) === true || (setActive === null || setActive === void 0 ? void 0 : setActive(element)), isArrow: (element === null || element === void 0 ? void 0 : element.isArrow) === true, leadContent: element === null || element === void 0 ? void 0 : element.leadContent, elements: element === null || element === void 0 ? void 0 : element.elements, icon: element === null || element === void 0 ? void 0 : element.icon, onClick: onClick, setActive: setActive })); })))));
    };
    exports.default = TreeItem;
});
