"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TREE_VIEW_NODE_HEIGHT = exports.TreeViewNode = void 0;
const tslib_1 = require("tslib");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_1 = tslib_1.__importStar(require("react"));
const ide_components_1 = require("@opensumi/ide-components");
const ide_core_browser_1 = require("@opensumi/ide-core-browser");
const actions_1 = require("@opensumi/ide-core-browser/lib/components/actions");
const next_1 = require("@opensumi/ide-core-browser/lib/menu/next");
const injectable_hooks_1 = require("@opensumi/ide-core-browser/lib/react-hooks/injectable-hooks");
const label_1 = require("@opensumi/ide-core-browser/lib/utils/label");
const theme_service_1 = require("@opensumi/ide-theme/lib/common/theme.service");
const tree_view_node_module_less_1 = tslib_1.__importDefault(require("../vscode/api/tree-view/tree-view-node.module.less"));
const TreeViewNode = ({ item, onClick, onChange, onContextMenu, itemType, leftPadding = 8, onTwistierClick, decorations, defaultLeftPadding = 8, treeViewId, decorationService, draggable, onDragStart, onDragEnter, onDragLeave, onDragOver, onDrop, }) => {
    const iconService = (0, injectable_hooks_1.useInjectable)(theme_service_1.IIconService);
    const styles_expansion_toggle = (0, ide_core_browser_1.useDesignStyles)(tree_view_node_module_less_1.default.expansion_toggle, 'expansion_toggle');
    const styles_tree_view_node = (0, ide_core_browser_1.useDesignStyles)(tree_view_node_module_less_1.default.tree_view_node, 'tree_view_node');
    const [decoration, setDecoration] = (0, react_1.useState)(item.uri && decorationService.getDecoration(item.uri, false));
    (0, react_1.useEffect)(() => {
        const disposable = decorationService.onDidChangeDecorations((e) => {
            if (item.uri && e.affectsResource(item.uri)) {
                setDecoration(decorationService.getDecoration(item.uri, false));
            }
        });
        return () => {
            disposable.dispose();
        };
    }, []);
    const themeService = (0, injectable_hooks_1.useInjectable)(theme_service_1.IThemeService);
    const handleClick = (0, react_1.useCallback)((ev) => {
        if (itemType === ide_components_1.TreeNodeType.TreeNode || itemType === ide_components_1.TreeNodeType.CompositeTreeNode) {
            onClick(ev, item, itemType);
        }
    }, [item, itemType, onClick]);
    const handlerTwistierClick = (0, react_1.useCallback)((ev) => {
        if (itemType === ide_components_1.TreeNodeType.TreeNode || itemType === ide_components_1.TreeNodeType.CompositeTreeNode) {
            if (onTwistierClick) {
                onTwistierClick(ev, item, itemType);
            }
            else {
                onClick(ev, item, itemType);
            }
        }
    }, [item, itemType, onTwistierClick, onClick]);
    const handleContextMenu = (0, react_1.useCallback)((ev) => {
        if (ev.nativeEvent.which === 0 || !onContextMenu) {
            return;
        }
        if (itemType === ide_components_1.TreeNodeType.TreeNode || itemType === ide_components_1.TreeNodeType.CompositeTreeNode) {
            onContextMenu(ev, item, itemType);
        }
    }, [item, itemType, onContextMenu]);
    const handleDragStart = (0, react_1.useCallback)((event) => {
        onDragStart && onDragStart(event, item);
    }, [item, onDragStart]);
    const handleDragEnter = (0, react_1.useCallback)((event) => {
        onDragEnter && onDragEnter(event, item);
    }, [item, onDragEnter]);
    const handleDragLeave = (0, react_1.useCallback)((event) => {
        onDragLeave && onDragLeave(event, item);
    }, [item, onDragLeave]);
    const handleDragOver = (0, react_1.useCallback)((event) => {
        onDragOver && onDragOver(event, item);
    }, [item, onDragOver]);
    const handleDrop = (0, react_1.useCallback)((event) => {
        onDrop && onDrop(event, item);
    }, [item, onDrop]);
    const handleCheckBoxChange = (0, react_1.useCallback)((event) => {
        onChange(item);
        event.stopPropagation();
    }, [item, onChange]);
    const isDirectory = itemType === ide_components_1.TreeNodeType.CompositeTreeNode;
    const paddingLeft = isDirectory
        ? `${defaultLeftPadding + (item.depth || 0) * (leftPadding || 0)}px`
        : `${defaultLeftPadding + (item.depth || 0) * (leftPadding || 0) + 8}px`;
    const fileTreeNodeStyle = {
        height: exports.TREE_VIEW_NODE_HEIGHT,
        lineHeight: `${exports.TREE_VIEW_NODE_HEIGHT}px`,
        paddingLeft,
    };
    const renderFolderToggle = (node, clickHandler) => {
        if (decorations && (decorations === null || decorations === void 0 ? void 0 : decorations.classlist.indexOf(tree_view_node_module_less_1.default.mod_loading)) > -1) {
            return react_1.default.createElement(ide_components_1.Loading, null);
        }
        return (react_1.default.createElement("div", { onClick: clickHandler, className: (0, classnames_1.default)(tree_view_node_module_less_1.default.tree_view_node_segment, styles_expansion_toggle, (0, ide_core_browser_1.getIcon)('arrow-right'), {
                [`${tree_view_node_module_less_1.default.mod_collapsed}`]: !node.expanded,
            }) }));
    };
    const renderIcon = (node) => (react_1.default.createElement("div", { className: (0, classnames_1.default)(tree_view_node_module_less_1.default.file_icon, node.icon), style: { maxHeight: exports.TREE_VIEW_NODE_HEIGHT } }));
    const renderCheckbox = (node) => {
        var _a;
        if (node.checkboxInfo === undefined) {
            return null;
        }
        return (react_1.default.createElement(ide_components_1.CheckBox, { "data-node-id": node.treeItemId, readOnly: true, onChange: (event) => handleCheckBoxChange(event), checked: !!node.checkboxInfo.checked, id: node.treeItemId, role: (_a = node.checkboxInfo.accessibilityInformation) === null || _a === void 0 ? void 0 : _a.role, title: node.checkboxInfo.tooltip }));
    };
    const renderDisplayName = (node) => {
        const displayName = () => {
            if (node.highlights) {
                let hightlightSnaps = [];
                let endIndex = 0;
                const hightlights = node.highlights.sort((a, b) => a[0] - b[0]);
                hightlightSnaps = hightlights.map((highlight, index) => {
                    const [start, end] = highlight;
                    const addonStr = node.displayName.slice(endIndex, start);
                    endIndex = end;
                    const highlightStr = node.displayName.slice(start, end);
                    const hls = [
                        react_1.default.createElement("span", { key: `line_begin_${index}_${addonStr}` }, addonStr),
                        react_1.default.createElement("span", { className: tree_view_node_module_less_1.default.highlight, key: `line_hightlight_${index}_${highlightStr}` }, highlightStr),
                    ];
                    if (index === hightlights.length - 1) {
                        const leftStr = node.displayName.slice(end);
                        hls.push(react_1.default.createElement("span", { key: `line_end_${index}_${leftStr}` }, leftStr));
                    }
                    return hls;
                });
                return hightlightSnaps;
            }
            else {
                return node.displayName;
            }
        };
        return (react_1.default.createElement("div", { className: (0, classnames_1.default)(tree_view_node_module_less_1.default.tree_view_node_segment, tree_view_node_module_less_1.default.tree_view_node_displayname, node.strikethrough && tree_view_node_module_less_1.default.strikethrough) }, displayName()));
    };
    const renderStatusTail = () => (react_1.default.createElement("div", { className: (0, classnames_1.default)(tree_view_node_module_less_1.default.tree_view_node_segment, tree_view_node_module_less_1.default.tree_view_node_tail) }, renderInlineActions()));
    const renderInlineActions = () => {
        if (item.actions.length > 0) {
            return (react_1.default.createElement("div", { className: tree_view_node_module_less_1.default.tree_view_actions },
                react_1.default.createElement(actions_1.TitleActionList, { className: tree_view_node_module_less_1.default.inlineMenu, context: [{ treeViewId, treeItemId: item.treeItemId }], nav: item.actions, menuId: next_1.MenuId.ViewItemContext })));
        }
    };
    const renderTwice = (item) => {
        if (isDirectory) {
            return renderFolderToggle(item, handlerTwistierClick);
        }
    };
    const getItemTooltip = () => {
        const tooltip = item.tooltip;
        return tooltip || item.name;
    };
    const renderDescription = (node) => (react_1.default.createElement("div", { className: (0, classnames_1.default)(tree_view_node_module_less_1.default.tree_view_node_segment_grow, tree_view_node_module_less_1.default.tree_view_node_description) }, !node.name && !node.description ? '——' : node.description));
    const renderDecos = () => {
        if (!decoration) {
            return null;
        }
        const badge = decoration.badge || '';
        const kolor = decoration.color;
        const color = kolor && themeService.getColor({ id: kolor });
        return (react_1.default.createElement("div", { className: tree_view_node_module_less_1.default.tree_view_node_tail, style: { color } }, (0, label_1.transformLabelWithCodicon)(badge.slice(), {}, iconService.fromString.bind(iconService))));
    };
    return (react_1.default.createElement("div", { key: item.id, onClick: handleClick, onContextMenu: handleContextMenu, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop, title: getItemTooltip(), className: (0, classnames_1.default)(styles_tree_view_node, decorations ? decorations.classlist : null), "data-id": item.id, style: fileTreeNodeStyle, draggable: draggable },
        react_1.default.createElement("div", { className: (0, classnames_1.default)(tree_view_node_module_less_1.default.tree_view_node_content) },
            renderTwice(item),
            renderCheckbox(item),
            renderIcon(item),
            react_1.default.createElement("div", { className: tree_view_node_module_less_1.default.tree_view_node_overflow_wrap },
                renderDisplayName(item),
                renderDescription(item)),
            renderStatusTail(),
            renderDecos())));
};
exports.TreeViewNode = TreeViewNode;
exports.TREE_VIEW_NODE_HEIGHT = 22;
//# sourceMappingURL=extension-tree-view-node.js.map