"use strict";
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TreeItem = exports.TreeItemBase = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const box_1 = require("../box");
const core_1 = require("../core");
const list_1 = require("../list");
const utils_1 = require("../utils");
const context_1 = require("./context");
const treeIcon_1 = __importDefault(require("./treeIcon"));
const treeText_1 = __importDefault(require("./treeText"));
/*@formatter:off*/
exports.TreeItemBase = core_1.styled.liBox `
  display: flex;
  flex-direction: column;
  transition-duration: fast;
  width: 100%;
`;
/*@formatter:on*/
/**
 * Displays a tree item with text and optional icons. Can be shown as selected.
 */
exports.TreeItem = (0, core_1.vui)((props, ref) => {
    var _a, _b, _c, _d;
    const mergedProps = Object.assign(Object.assign({}, (0, context_1.useTreeContext)()), props);
    const { activeItemId, activeItemIndex, children, center, centerH, centerV = true, className, iconCollapse = 'falMinus', isCollapsed, disabled, iconExpand = 'falPlus', id, items, isActive, isFirstLevel, isTruncated, key, onClickTreeItem, onToggle, propagatedPL, plUnit = 26, text } = mergedProps, rest = __rest(mergedProps, ["activeItemId", "activeItemIndex", "children", "center", "centerH", "centerV", "className", "iconCollapse", "isCollapsed", "disabled", "iconExpand", "id", "items", "isActive", "isFirstLevel", "isTruncated", "key", "onClickTreeItem", "onToggle", "propagatedPL", "plUnit", "text"]);
    const styles = (0, core_1.useStyleConfig)('Tree', (0, context_1.useTreeContext)());
    const _e = styles.item, { activeBg, bg, color, h, hoverBg, hoverColor, p, px, py, selectedBg } = _e, itemStyles = __rest(_e, ["activeBg", "bg", "color", "h", "hoverBg", "hoverColor", "p", "px", "py", "selectedBg"]);
    const [collapsedInternal, setIsCollapsedInternal] = (0, react_1.useState)(false);
    const innerBoxPl = propagatedPL || 0;
    const innerListPl = innerBoxPl + (plUnit || 0);
    (0, react_1.useEffect)(() => {
        setIsCollapsedInternal(!!isCollapsed);
    }, [isCollapsed]);
    const toggle = (e) => {
        var _a;
        if (!disabled) {
            onToggle === null || onToggle === void 0 ? void 0 : onToggle({ id, collapsed: !collapsedInternal });
            setIsCollapsedInternal(!collapsedInternal);
        }
        const target = e.target;
        const active = (_a = target === null || target === void 0 ? void 0 : target.closest('.vui-tree')) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('vui-treeItem-active')[0];
        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
        active ? (active.style.backgroundColor = 'transparent') : null;
        onClickTreeItem === null || onClickTreeItem === void 0 ? void 0 : onClickTreeItem(id);
        // Avoids triggering parent's onClick
        e.stopPropagation();
    };
    const hoverTreeItem = (e, type) => {
        var _a, _b, _c, _d, _e, _f;
        const target = e.target;
        let parentDiv = undefined;
        if (target.classList.contains('vui-treeItem-permanent')) {
            parentDiv = target;
        }
        else {
            const parentLi = target.closest('.vui-treeItem');
            parentDiv = parentLi === null || parentLi === void 0 ? void 0 : parentLi.getElementsByClassName('vui-treeItem-permanent')[0];
        }
        const isDivActive = parentDiv.classList.contains('vui-treeItem-active') ? true : false;
        // translate the list-item style over to the div
        if (parentDiv.classList.contains('vui-treeItem-permanent')) {
            // is it a fist level item?
            if (parentDiv.classList.contains('vui-treeItem-firstLevel')) {
                if (type === 'over') {
                    parentDiv.style.backgroundColor = (0, utils_1.vuiColorToRGBA)(((_a = styles === null || styles === void 0 ? void 0 : styles.firstLevelItem) === null || _a === void 0 ? void 0 : _a.hoverBg) || 'transparent');
                }
                if (type === 'out') {
                    parentDiv.style.backgroundColor = isDivActive
                        ? (0, utils_1.vuiColorToRGBA)(((_b = styles === null || styles === void 0 ? void 0 : styles.firstLevelItem) === null || _b === void 0 ? void 0 : _b.activeBg) || 'transparent')
                        : (0, utils_1.vuiColorToRGBA)(((_c = styles === null || styles === void 0 ? void 0 : styles.firstLevelItem) === null || _c === void 0 ? void 0 : _c.bg) || 'transparent');
                }
            }
            else {
                // it is NOT first level
                if (type === 'over') {
                    parentDiv.style.backgroundColor = (0, utils_1.vuiColorToRGBA)(((_d = styles === null || styles === void 0 ? void 0 : styles.item) === null || _d === void 0 ? void 0 : _d.hoverBg) || 'transparent');
                }
                if (type === 'out') {
                    parentDiv.style.backgroundColor = isDivActive
                        ? (0, utils_1.vuiColorToRGBA)(((_e = styles === null || styles === void 0 ? void 0 : styles.item) === null || _e === void 0 ? void 0 : _e.activeBg) || 'transparent')
                        : (0, utils_1.vuiColorToRGBA)(((_f = styles === null || styles === void 0 ? void 0 : styles.item) === null || _f === void 0 ? void 0 : _f.bg) || 'transparent');
                }
            }
        }
        else {
            e.preventDefault();
        }
        e.stopPropagation();
    };
    const isCollapsable = ((0, utils_1.isArray)(children) && children.length > 0) || ((0, utils_1.isArray)(items) && items.length > 0);
    const isActiveInternal = (!activeItemIndex && isActive) || activeItemIndex === id;
    let textMl = items && (items === null || items === void 0 ? void 0 : items.length) > 0 ? 0 : 1.5;
    if (!isCollapsable) {
        textMl += 3.8;
    }
    const aliasedProps = (0, utils_1.filterUndefined)({
        'aria-expanded': isCollapsable ? !collapsedInternal : undefined,
        role: 'treeitem',
    });
    // hoverBg cannot be styled directly from theme, it has to be JS manipulated because of event propagation
    return ((0, jsx_runtime_1.jsx)(exports.TreeItemBase, Object.assign({ className: (0, utils_1.cs)('vui-treeItem', isFirstLevel ? 'vui-treeItem-firstLevel' : '', className), color: isFirstLevel ? (_a = styles === null || styles === void 0 ? void 0 : styles.firstLevelItem) === null || _a === void 0 ? void 0 : _a.color : color, h: collapsedInternal ? h : isCollapsable ? 'auto' : h, id: id.toString(), m: 0, onClick: !disabled ? (e) => toggle(e) : undefined, onMouseOut: !disabled ? (e) => hoverTreeItem(e, 'out') : undefined, onMouseOver: !disabled ? (e) => hoverTreeItem(e, 'over') : undefined, p: 0, propagatedPL: propagatedPL, ref: ref, w: 1 }, itemStyles, { bg: isFirstLevel
            ? isActiveInternal
                ? (_b = styles === null || styles === void 0 ? void 0 : styles.firstLevelItem) === null || _b === void 0 ? void 0 : _b.activeBg
                : (_c = styles === null || styles === void 0 ? void 0 : styles.firstLevelItem) === null || _c === void 0 ? void 0 : _c.bg
            : isActiveInternal
                ? (_d = styles === null || styles === void 0 ? void 0 : styles.item) === null || _d === void 0 ? void 0 : _d.activeBg
                : bg, hoverBg: undefined }, aliasedProps, rest, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(box_1.Box, { centerV: true, className: (0, utils_1.cs)('vui-treeItem-permanent', isActiveInternal ? 'vui-treeItem-active' : '', isFirstLevel ? 'vui-treeItem-firstLevel' : ''), fontWeight: isActiveInternal ? '600' : '500', pl: `${innerBoxPl}px`, children: [items && (items === null || items === void 0 ? void 0 : items.length) > 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: collapsedInternal ? (0, jsx_runtime_1.jsx)(treeIcon_1.default, { mx: 1.5, name: iconExpand }) : (0, jsx_runtime_1.jsx)(treeIcon_1.default, { mx: 1.5, name: iconCollapse }) })), (0, utils_1.isReactText)(text) ? (0, jsx_runtime_1.jsx)(treeText_1.default, { ml: textMl, isTruncated, text }) : text] }), isCollapsable && !collapsedInternal && ((0, jsx_runtime_1.jsx)(list_1.List, { role: "tree", w: 1, children: children !== null && children !== void 0 ? children : ((0, utils_1.isArray)(items)
                        ? items.map((_a, index) => {
                            var { key, propagatedPL } = _a, props = __rest(_a, ["key", "propagatedPL"]);
                            return ((0, jsx_runtime_1.jsx)(exports.TreeItem, Object.assign({ activeItemIndex: activeItemIndex, iconCollapse: iconCollapse, iconExpand: iconExpand, onClickTreeItem: onClickTreeItem, propagatedPL: innerListPl }, props), key !== null && key !== void 0 ? key : index));
                        })
                        : items) }))] }) })));
});
exports.TreeItem.displayName = 'TreeItem';
exports.default = exports.TreeItem;
//# sourceMappingURL=treeItem.js.map