import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { HelpMark, Hotkey, Icon, List, Popup } from '@gravity-ui/uikit';
import { cn } from "../../../classname.js";
import { i18n } from "../../../i18n/suggest/index.js";
import { isFunction } from "../../../lodash.js";
import { ErrorLoggerBoundary } from "../../../react-utils/ErrorBoundary.js";
import { PreviewTooltip } from "../../../toolbar/PreviewTooltip.js";
import "./component.css";
const b = 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);
}
export const CommandMenuComponent = ({ anchorElement, currentIndex, items, onItemClick, onOpenChange, }) => {
    if (!anchorElement)
        return null;
    return (_jsx(Popup, { open: true, anchorElement: anchorElement, placement: placement, onOpenChange: onOpenChange, children: _jsx("div", { className: b(), children: _jsx(List, { virtualized: true, items: items, sortable: false, filterable: false, emptyPlaceholder: 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') }) }) }));
};
function renderItem({ id, title, icon, hotkey, hint, preview }) {
    const titleText = isFunction(title) ? title() : title;
    const hintText = isFunction(hint) ? hint() : hint;
    return (_jsx(PreviewTooltip, { preview: preview, children: _jsxs("div", { className: b('item', { id }), children: [_jsx(Icon, { data: icon.data, size: 20, className: b('item-icon') }), _jsxs("div", { className: b('item-body'), children: [_jsx("span", { className: b('item-title'), children: titleText }), _jsxs("div", { className: b('item-extra'), children: [hotkey && _jsx(Hotkey, { value: hotkey, className: b('item-hotkey') }), hintText && _jsx(HelpMark, { className: b('item-hint'), children: hintText })] })] })] }, id) }));
}
export function render(props) {
    return (_jsx(ErrorLoggerBoundary, { children: _jsx(CommandMenuComponent, { ...props }) }));
}
//# sourceMappingURL=component.js.map
