var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { Children, cloneElement } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { useStyles } from './styles';
export var TreeNode = function (_a) {
    var children = _a.children, listIndex = _a.listIndex, _b = _a.swapFrom, swapFrom = _b === void 0 ? null : _b, _c = _a.swapLength, swapLength = _c === void 0 ? null : _c, _d = _a.swapDepth, swapDepth = _d === void 0 ? null : _d, scaffoldBlockPxWidth = _a.scaffoldBlockPxWidth, lowerSiblingCounts = _a.lowerSiblingCounts, connectDropTarget = _a.connectDropTarget, isOver = _a.isOver, _e = _a.draggedNode, draggedNode = _e === void 0 ? null : _e, _f = _a.canDrop, canDrop = _f === void 0 ? false : _f, treeIndex = _a.treeIndex, 
    /* eslint-disable */
    treeId = _a.treeId, // Delete from otherProps
    getPrevRow = _a.getPrevRow, // Delete from otherProps
    node = _a.node, // Delete from otherProps
    path = _a.path, // Delete from otherProps
    /* eslint-enable */
    _g = _a.rowDirection, // Delete from otherProps
    /* eslint-enable */
    rowDirection = _g === void 0 ? 'ltr' : _g, otherProps = __rest(_a, ["children", "listIndex", "swapFrom", "swapLength", "swapDepth", "scaffoldBlockPxWidth", "lowerSiblingCounts", "connectDropTarget", "isOver", "draggedNode", "canDrop", "treeIndex", "treeId", "getPrevRow", "node", "path", "rowDirection"]);
    useStyles();
    var rowDirectionClass = rowDirection === 'rtl' ? 'rst__rtl' : null;
    // Construct the scaffold representing the structure of the tree
    var scaffoldBlockCount = lowerSiblingCounts.length;
    var scaffold = [];
    lowerSiblingCounts.forEach(function (lowerSiblingCount, i) {
        var lineClass = '';
        if (lowerSiblingCount > 0) {
            // At this level in the tree, the nodes had sibling nodes further down
            if (listIndex === 0) {
                // Top-left corner of the tree
                // +-----+
                // |     |
                // |  +--+
                // |  |  |
                // +--+--+
                lineClass = 'rst__lineHalfHorizontalRight rst__lineHalfVerticalBottom';
            }
            else if (i === scaffoldBlockCount - 1) {
                // Last scaffold block in the row, right before the row content
                // +--+--+
                // |  |  |
                // |  +--+
                // |  |  |
                // +--+--+
                lineClass = 'rst__lineHalfHorizontalRight rst__lineFullVertical';
            }
            else {
                // Simply connecting the line extending down to the next sibling on this level
                // +--+--+
                // |  |  |
                // |  |  |
                // |  |  |
                // +--+--+
                lineClass = 'rst__lineFullVertical';
            }
        }
        else if (listIndex === 0) {
            // Top-left corner of the tree, but has no siblings
            // +-----+
            // |     |
            // |  +--+
            // |     |
            // +-----+
            lineClass = 'rst__lineHalfHorizontalRight';
        }
        else if (i === scaffoldBlockCount - 1) {
            // The last or only node in this level of the tree
            // +--+--+
            // |  |  |
            // |  +--+
            // |     |
            // +-----+
            lineClass = 'rst__lineHalfVerticalTop rst__lineHalfHorizontalRight';
        }
        scaffold.push(React.createElement("div", { key: "pre_".concat(1 + i), style: { width: scaffoldBlockPxWidth }, className: classnames('rst__lineBlock', lineClass, rowDirectionClass) }));
        if (treeIndex !== listIndex && i === swapDepth) {
            // This row has been shifted, and is at the depth of
            // the line pointing to the new destination
            var highlightLineClass = '';
            if (listIndex === swapFrom + swapLength - 1) {
                // This block is on the bottom (target) line
                // This block points at the target block (where the row will go when released)
                highlightLineClass = 'rst__highlightBottomLeftCorner';
            }
            else if (treeIndex === swapFrom) {
                // This block is on the top (source) line
                highlightLineClass = 'rst__highlightTopLeftCorner';
            }
            else {
                // This block is between the bottom and top
                highlightLineClass = 'rst__highlightLineVertical';
            }
            var style_1;
            if (rowDirection === 'rtl') {
                style_1 = {
                    width: scaffoldBlockPxWidth,
                    right: scaffoldBlockPxWidth * i
                };
            }
            else {
                // Default ltr
                style_1 = {
                    width: scaffoldBlockPxWidth,
                    left: scaffoldBlockPxWidth * i
                };
            }
            scaffold.push(React.createElement("div", { key: i, style: style_1, className: classnames('rst__absoluteLineBlock', highlightLineClass, rowDirectionClass) }));
        }
    });
    var style;
    if (rowDirection === 'rtl') {
        style = { right: scaffoldBlockPxWidth * scaffoldBlockCount };
    }
    else {
        // Default ltr
        style = { left: scaffoldBlockPxWidth * scaffoldBlockCount };
    }
    return connectDropTarget(React.createElement("div", __assign({}, otherProps, { className: classnames('rst__node', rowDirectionClass) }),
        scaffold,
        React.createElement("div", { className: "rst__nodeContent", style: style }, Children.map(children, function (child) {
            return cloneElement(child, {
                isOver: isOver,
                canDrop: canDrop,
                draggedNode: draggedNode
            });
        }))));
};
TreeNode.propTypes = {
    treeIndex: PropTypes.number.isRequired,
    treeId: PropTypes.string.isRequired,
    swapFrom: PropTypes.number,
    swapDepth: PropTypes.number,
    swapLength: PropTypes.number,
    scaffoldBlockPxWidth: PropTypes.number.isRequired,
    lowerSiblingCounts: PropTypes.arrayOf(PropTypes.number).isRequired,
    listIndex: PropTypes.number.isRequired,
    children: PropTypes.node.isRequired,
    // Drop target
    connectDropTarget: PropTypes.func.isRequired,
    isOver: PropTypes.bool.isRequired,
    canDrop: PropTypes.bool,
    draggedNode: PropTypes.shape({}),
    // used in dndManager
    getPrevRow: PropTypes.func.isRequired,
    node: PropTypes.shape({}).isRequired,
    path: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
    // rtl support
    rowDirection: PropTypes.string
};
