"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CommandMenuComponent = void 0;
exports.render = render;
const jsx_runtime_1 = require("react/jsx-runtime");
const uikit_1 = require("@gravity-ui/uikit");
const classname_1 = require("../../../classname.js");
const suggest_1 = require("../../../i18n/suggest/index.js");
const lodash_1 = require("../../../lodash.js");
const ErrorBoundary_1 = require("../../../react-utils/ErrorBoundary.js");
const PreviewTooltip_1 = require("../../../toolbar/PreviewTooltip.js");
require("./component.css");
const b = (0, classname_1.cn)('command-menu');
const placement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
const ITEM_HEIGHT = 28; // px
const VISIBLE_ITEMS_COUNT = 10;
const MAX_LIST_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS_COUNT; // px
function calcListHeight(itemsCount) {
    if (itemsCount <= 0)
        return undefined;
    return Math.min(MAX_LIST_HEIGHT, itemsCount * ITEM_HEIGHT);
}
const CommandMenuComponent = ({ anchorElement, currentIndex, items, onItemClick, onOpenChange, }) => {
    if (!anchorElement)
        return null;
    return ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: true, anchorElement: anchorElement, placement: placement, onOpenChange: onOpenChange, children: (0, jsx_runtime_1.jsx)("div", { className: b(), children: (0, jsx_runtime_1.jsx)(uikit_1.List, { virtualized: true, items: items, sortable: false, filterable: false, emptyPlaceholder: (0, suggest_1.i18n)('empty-msg'), itemHeight: ITEM_HEIGHT, itemsHeight: calcListHeight(items.length), renderItem: renderItem, deactivateOnLeave: false, activeItemIndex: currentIndex, onItemClick: (_item, index) => onItemClick(index), className: b('list'), itemClassName: b('list-item') }) }) }));
};
exports.CommandMenuComponent = CommandMenuComponent;
function renderItem({ id, title, icon, hotkey, hint, preview }) {
    const titleText = (0, lodash_1.isFunction)(title) ? title() : title;
    const hintText = (0, lodash_1.isFunction)(hint) ? hint() : hint;
    return ((0, jsx_runtime_1.jsx)(PreviewTooltip_1.PreviewTooltip, { preview: preview, children: (0, jsx_runtime_1.jsxs)("div", { className: b('item', { id }), children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icon.data, size: 20, className: b('item-icon') }), (0, jsx_runtime_1.jsxs)("div", { className: b('item-body'), children: [(0, jsx_runtime_1.jsx)("span", { className: b('item-title'), children: titleText }), (0, jsx_runtime_1.jsxs)("div", { className: b('item-extra'), children: [hotkey && (0, jsx_runtime_1.jsx)(uikit_1.Hotkey, { value: hotkey, className: b('item-hotkey') }), hintText && (0, jsx_runtime_1.jsx)(uikit_1.HelpMark, { className: b('item-hint'), children: hintText })] })] })] }, id) }));
}
function render(props) {
    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorLoggerBoundary, { children: (0, jsx_runtime_1.jsx)(exports.CommandMenuComponent, { ...props }) }));
}
//# sourceMappingURL=component.js.map
