import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { List, Popup } from '@gravity-ui/uikit';
import { cn } from "../../../../classname.js";
import { ErrorLoggerBoundary } from "../../../../react-utils/ErrorBoundary.js";
import "./EmojiSuggestComponent.css";
const b = 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);
}
export const EmojiSuggestComponent = ({ anchorElement, currentIndex, items, onClick, onOpenChange, }) => {
    if (!anchorElement)
        return null;
    return (_jsx(Popup, { open: Boolean(items.length), anchorElement: anchorElement, placement: placement, onOpenChange: onOpenChange, children: _jsx("div", { className: b(), children: _jsx(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') }) }) }));
};
function renderItem({ origName, symbol, origShortcuts }) {
    return (_jsxs("div", { className: b('item'), children: [_jsxs("div", { className: b('item-info'), children: [_jsx("div", { className: b('item-icon'), children: symbol }), _jsxs("div", { className: b('item-name'), children: [":", origName, ":"] })] }), origShortcuts !== undefined && (_jsx("div", { className: b('item-shortcuts'), children: origShortcuts.slice(0, 4).map((val) => (_jsx("span", { className: b('item-shortcut'), children: val }, `${origName}_${val}`))) }))] }, origName));
}
export function render(props) {
    return (_jsx(ErrorLoggerBoundary, { children: _jsx(EmojiSuggestComponent, { ...props }) }));
}
//# sourceMappingURL=EmojiSuggestComponent.js.map
