"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DesignBrowserCtxMenuService = void 0;
const tslib_1 = require("tslib");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_1 = tslib_1.__importStar(require("react"));
const di_1 = require("@opensumi/di");
const ide_components_1 = require("@opensumi/ide-components");
const ide_core_browser_1 = require("@opensumi/ide-core-browser");
const ctx_menu_service_1 = require("@opensumi/ide-overlay/lib/browser/ctx-menu/ctx-menu.service");
const ide_theme_1 = require("@opensumi/ide-theme");
const design_module_less_1 = tslib_1.__importDefault(require("../style/design.module.less"));
const MenuComponent = (props) => {
    const iconService = (0, ide_core_browser_1.useInjectable)(ide_theme_1.IIconService);
    const { data, disabled, hasSubmenu } = props;
    const renderIcon = (0, react_1.useMemo)(() => {
        if (data.checked) {
            return react_1.default.createElement(ide_components_1.Icon, { icon: 'check' });
        }
        if (data.icon) {
            return react_1.default.createElement(ide_components_1.Icon, { iconClass: data.icon });
        }
        return null;
    }, [data]);
    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(design_module_less_1.default.menuAction__sub_menu_action_container, {
            [design_module_less_1.default.disabled]: disabled,
            [design_module_less_1.default.checked]: data.checked,
        }, data.className) },
        react_1.default.createElement("div", { className: design_module_less_1.default.icon }, renderIcon),
        react_1.default.createElement("div", { className: design_module_less_1.default.label }, data.label
            ? (0, ide_core_browser_1.transformLabelWithCodicon)(ide_core_browser_1.strings.mnemonicButtonLabel(data.label, true), { margin: '0 3px' }, iconService === null || iconService === void 0 ? void 0 : iconService.fromString.bind(iconService))
            : ''),
        react_1.default.createElement("div", { className: design_module_less_1.default.tip },
            data.keybinding ? react_1.default.createElement("div", { className: design_module_less_1.default.shortcut }, data.keybinding) : null,
            hasSubmenu ? (react_1.default.createElement("div", { className: design_module_less_1.default.submenuIcon },
                react_1.default.createElement(ide_components_1.Icon, { icon: 'right-arrow' }))) : null,
            !data.keybinding && !hasSubmenu && data.extraDesc && react_1.default.createElement("div", { className: design_module_less_1.default.extraDesc }, data.extraDesc))));
};
let DesignBrowserCtxMenuService = class DesignBrowserCtxMenuService extends ctx_menu_service_1.BrowserCtxMenuService {
    renderSubMenuTitle(node, props) {
        return react_1.default.createElement(MenuComponent, Object.assign({ data: node }, props));
    }
    renderMenuItem(node, props) {
        return react_1.default.createElement(MenuComponent, Object.assign({ data: node }, props));
    }
};
DesignBrowserCtxMenuService = tslib_1.__decorate([
    (0, di_1.Injectable)()
], DesignBrowserCtxMenuService);
exports.DesignBrowserCtxMenuService = DesignBrowserCtxMenuService;
//# sourceMappingURL=menu.service.js.map