import { __assign, __read, __rest } from "tslib";
import React, { createContext, useState } from "react";
import { IconBrokenArrowRight3 } from "@greenatom/icons";
import { useStateProps } from "../hooks/useStateProps";
import { changeTitle, moveNode } from "./helpers";
import TreeItem from "./componets/TreeItem";
import { TreeWrapper, IconWrapper, TreeList, TreeHeader, Title } from "./styles";
export var TreeContext = createContext({});
var Tree = function (_a) {
    var title = _a.title, icon = _a.icon, isArrow = _a.isArrow, dataSource = _a.dataSource, style = _a.style, className = _a.className, isDisabled = _a.isDisabled, width = _a.width, onClick = _a.onClick, setActive = _a.setActive, onHandleDragStart = _a.onHandleDragStart, onHandleDragFinish = _a.onHandleDragFinish, onHandleDragOver = _a.onHandleDragOver, onTitleChanged = _a.onTitleChanged, isDragAllowed = _a.isDragAllowed, isEditAllowed = _a.isEditAllowed, otherProps = __rest(_a, ["title", "icon", "isArrow", "dataSource", "style", "className", "isDisabled", "width", "onClick", "setActive", "onHandleDragStart", "onHandleDragFinish", "onHandleDragOver", "onTitleChanged", "isDragAllowed", "isEditAllowed"]);
    var _b = __read(useState(dataSource), 2), treeElements = _b[0], setTreeElements = _b[1];
    var _c = __read(useStateProps(isArrow || false), 2), isShown = _c[0], setIsShown = _c[1];
    var _d = __read(useState(false), 2), isHover = _d[0], setIsHover = _d[1];
    var _e = __read(useState(), 2), currentlyDraggedId = _e[0], setNowDraggingId = _e[1];
    var _f = __read(useState(), 2), draggedOverId = _f[0], setNowDragOverId = _f[1];
    var handleDragStart = function (item) {
        setNowDraggingId(item.id);
        onHandleDragStart === null || onHandleDragStart === void 0 ? void 0 : onHandleDragStart(item);
    };
    var handleDragOver = function (item) {
        if (currentlyDraggedId) {
            if (currentlyDraggedId !== item.id) {
                setNowDragOverId(item.id);
            }
            else {
                setNowDragOverId(currentlyDraggedId);
            }
            onHandleDragOver === null || onHandleDragOver === void 0 ? void 0 : onHandleDragOver(item);
        }
    };
    var handleDrop = function () {
        if (currentlyDraggedId !== draggedOverId &&
            currentlyDraggedId &&
            draggedOverId) {
            var newTree = moveNode(treeElements, currentlyDraggedId, draggedOverId);
            setTreeElements(newTree);
            onHandleDragFinish === null || onHandleDragFinish === void 0 ? void 0 : onHandleDragFinish(newTree);
        }
        setNowDraggingId(undefined);
        setNowDragOverId(undefined);
    };
    var handleChangeTitle = function (item, newTitle) {
        if (isEditAllowed) {
            var newTree = changeTitle(treeElements, item.id, newTitle);
            setTreeElements(newTree);
            onTitleChanged === null || onTitleChanged === void 0 ? void 0 : onTitleChanged(item, newTitle);
        }
    };
    return (React.createElement(TreeContext.Provider, { value: {
            draggedOverId: draggedOverId,
            currentlyDraggedId: currentlyDraggedId,
            isDragAllowed: isDragAllowed,
            isEditAllowed: isEditAllowed,
            handleChangeTitle: handleChangeTitle,
            handleDragStart: handleDragStart,
            handleDrop: handleDrop,
            handleDragOver: handleDragOver
        } },
        React.createElement(TreeWrapper, __assign({ style: style, className: className, width: width, isDragOver: draggedOverId === "root", isAnyDragging: currentlyDraggedId !== undefined }, otherProps),
            React.createElement(TreeHeader, { isDisabled: isDisabled, isActive: isShown, onClick: function () { return !isDisabled && setIsShown(!isShown); }, onMouseMove: function () { return !isDisabled && setIsHover(true); }, onMouseOut: function () { return !isDisabled && setIsHover(false); }, onMouseOver: function () {
                    return !isDisabled && handleDragOver({ id: "root", title: "" });
                } },
                React.createElement(IconWrapper, { isShown: isShown },
                    React.createElement(IconBrokenArrowRight3, { className: "arrow-icon", width: 16, height: 16 })),
                React.createElement(Title, { value: title, readOnly: true }),
                !isDisabled && icon && (isShown || isHover) && (React.createElement("div", { className: "tree-header__right-content" }, icon && React.createElement(IconWrapper, null, icon)))),
            isShown && (React.createElement(TreeList, null, treeElements &&
                (treeElements === null || treeElements === void 0 ? void 0 : treeElements.length) > 0 &&
                treeElements.map(function (element) { return (React.createElement(TreeItem, { onClick: onClick, id: element.id, 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, key: element.id, title: element.title, icon: element === null || element === void 0 ? void 0 : element.icon, leadContent: element === null || element === void 0 ? void 0 : element.leadContent, elements: element === null || element === void 0 ? void 0 : element.elements, isDisabled: (element === null || element === void 0 ? void 0 : element.isDisabled) === true, setActive: setActive })); }))))));
};
Tree.displayName = "Tree";
export default Tree;
