"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EmojiSuggestComponent = 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 ErrorBoundary_1 = require("../../../../react-utils/ErrorBoundary.js");
require("./EmojiSuggestComponent.css");
const b = (0, classname_1.cn)('emoji-suggest');
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 EmojiSuggestComponent = ({ anchorElement, currentIndex, items, onClick, onOpenChange, }) => {
    if (!anchorElement)
        return null;
    return ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: Boolean(items.length), 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, itemHeight: ITEM_HEIGHT, itemsHeight: calcListHeight(items.length), renderItem: renderItem, deactivateOnLeave: false, activeItemIndex: currentIndex, onItemClick: (_item, index) => onClick(index), className: b('list'), itemClassName: b('list-item') }) }) }));
};
exports.EmojiSuggestComponent = EmojiSuggestComponent;
function renderItem({ origName, symbol, origShortcuts }) {
    return ((0, jsx_runtime_1.jsxs)("div", { className: b('item'), children: [(0, jsx_runtime_1.jsxs)("div", { className: b('item-info'), children: [(0, jsx_runtime_1.jsx)("div", { className: b('item-icon'), children: symbol }), (0, jsx_runtime_1.jsxs)("div", { className: b('item-name'), children: [":", origName, ":"] })] }), origShortcuts !== undefined && ((0, jsx_runtime_1.jsx)("div", { className: b('item-shortcuts'), children: origShortcuts.slice(0, 4).map((val) => ((0, jsx_runtime_1.jsx)("span", { className: b('item-shortcut'), children: val }, `${origName}_${val}`))) }))] }, origName));
}
function render(props) {
    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorLoggerBoundary, { children: (0, jsx_runtime_1.jsx)(exports.EmojiSuggestComponent, { ...props }) }));
}
//# sourceMappingURL=EmojiSuggestComponent.js.map
