"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BasicTreeNodeRenderer = void 0;
const tslib_1 = require("tslib");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_1 = tslib_1.__importStar(require("react"));
const button_1 = require("../../button");
const icon_1 = require("../../icon");
const loading_1 = require("../../loading");
const tree_node_define_1 = require("./tree-node.define");
const types_1 = require("./types");
require("./styles.less");
const BasicTreeNodeRenderer = ({ item, className, itemHeight = 22, indent = 8, baseIndent = 8, onClick, onDbClick, onTwistierClick, onIconClick, onContextMenu, decorations, inlineMenus = [], inlineMenuActuator = () => { }, }) => {
    const handleClick = (0, react_1.useCallback)((event) => {
        if (onClick) {
            event.stopPropagation();
            onClick(event, item);
        }
    }, [onClick]);
    const handleDbClick = (0, react_1.useCallback)((event) => {
        if (onDbClick) {
            event.stopPropagation();
            onDbClick(event, item);
        }
    }, [onDbClick]);
    const handleContextMenu = (0, react_1.useCallback)((event) => {
        if (onContextMenu) {
            event.stopPropagation();
            event.preventDefault();
            onContextMenu(event, item);
        }
    }, [onContextMenu]);
    const handlerTwistierClick = (0, react_1.useCallback)((event) => {
        event.stopPropagation();
        if (onTwistierClick) {
            onTwistierClick(event, item);
        }
        else if (onClick) {
            onClick(event, item);
        }
    }, [onClick, onTwistierClick]);
    const handlerIconClick = (0, react_1.useCallback)((event) => {
        event.stopPropagation();
        if (onIconClick) {
            onIconClick(event, item);
        }
        else if (onClick) {
            onClick(event, item);
        }
    }, [onClick, onIconClick]);
    const depth = item.depth > 0 ? item.depth - 1 : 0;
    let paddingLeft = depth * indent;
    if (baseIndent) {
        paddingLeft += baseIndent;
    }
    if (item.indentOffset) {
        paddingLeft += item.indentOffset;
    }
    const treeNodeStyle = {
        height: itemHeight,
        lineHeight: `${itemHeight}px`,
        paddingLeft: `${paddingLeft}px`,
    };
    const renderIcon = (0, react_1.useCallback)((node) => (react_1.default.createElement(icon_1.Icon, { onClick: handlerIconClick, icon: node.icon, className: (0, classnames_1.default)('icon', node.iconClassName) })), []);
    const getName = (0, react_1.useCallback)((node) => node.displayName.replace(/\n/g, '↵'), []);
    const renderDisplayName = (0, react_1.useCallback)((node) => node.displayName && react_1.default.createElement("div", { className: (0, classnames_1.default)('segment', 'display_name') }, getName(node)), []);
    const renderLabel = (0, react_1.useCallback)((node) => node.renderLabel, []);
    const renderDescription = (0, react_1.useCallback)((node) => {
        if (!node.description) {
            return null;
        }
        if (typeof node.description === 'string') {
            return react_1.default.createElement("div", { className: (0, classnames_1.default)('segment_grow', 'description') }, node.description);
        }
        return node.description;
    }, []);
    const inlineMenuActions = (0, react_1.useCallback)((item) => {
        if (Array.isArray(inlineMenus)) {
            return inlineMenus;
        }
        else if (typeof inlineMenus === 'function') {
            return inlineMenus(item);
        }
    }, [inlineMenus]);
    const renderNodeTail = () => {
        var _a;
        const isBasicCompositeTreeNode = tree_node_define_1.BasicCompositeTreeNode.is(item);
        const actions = (_a = inlineMenuActions(item)) === null || _a === void 0 ? void 0 : _a.filter((menu) => isBasicCompositeTreeNode
            ? menu.position === types_1.IBasicInlineMenuPosition.TREE_CONTAINER
            : menu.position === types_1.IBasicInlineMenuPosition.TREE_NODE);
        if (!(actions === null || actions === void 0 ? void 0 : actions.length)) {
            return null;
        }
        const handleActionClick = (0, react_1.useCallback)((event, action) => {
            event.stopPropagation();
            inlineMenuActuator(item, action);
        }, []);
        return (react_1.default.createElement("div", { className: (0, classnames_1.default)('segment', 'tail') }, actions.map((action) => (react_1.default.createElement(button_1.Button, { style: { marginRight: '5px' }, type: 'icon', key: `${item.id}-${action.icon}`, icon: action.icon, title: action.title, onClick: (e) => handleActionClick(e, action) })))));
    };
    const renderFolderToggle = (node, clickHandler) => {
        if (decorations && (decorations === null || decorations === void 0 ? void 0 : decorations.classlist.indexOf(types_1.DECORATIONS.LOADING)) > -1) {
            return react_1.default.createElement(loading_1.Loading, null);
        }
        return (react_1.default.createElement(icon_1.Icon, { className: (0, classnames_1.default)('segment', 'expansion_toggle', node.twisterClassName, {
                ['mod_collapsed']: !node.expanded,
            }), onClick: clickHandler, icon: 'arrow-right' }));
    };
    const renderTwistier = (item) => {
        if (!item.expandable) {
            // a simple trick to make the tree node's padding-left is the same as the folder node's
            return react_1.default.createElement("div", { className: (0, classnames_1.default)('segment', 'expansion_toggle', item.twisterPlaceholderClassName) });
        }
        if (tree_node_define_1.BasicCompositeTreeNode.is(item)) {
            return renderFolderToggle(item, handlerTwistierClick);
        }
    };
    return (react_1.default.createElement("div", { key: item.id, onClick: handleClick, onDoubleClick: handleDbClick, onContextMenu: handleContextMenu, className: (0, classnames_1.default)('tree_node', className, decorations ? decorations.classlist : null, item.className), style: treeNodeStyle, "data-id": item.id },
        react_1.default.createElement("div", { className: 'content' },
            renderTwistier(item),
            renderIcon(item),
            react_1.default.createElement("div", { className: 'overflow_wrap' },
                renderLabel(item) || renderDisplayName(item),
                renderDescription(item)),
            renderNodeTail())));
};
exports.BasicTreeNodeRenderer = BasicTreeNodeRenderer;
//# sourceMappingURL=tree-node.js.map