"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormattingList = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const ContextMenu_1 = require("nice-ui/lib/4-card/ContextMenu");
const nano_theme_1 = require("nano-theme");
const FormattingIcon_1 = require("../views/icon/FormattingIcon");
const FormattingList = ({ formattings, onSelect }) => {
    if (!formattings.length)
        return;
    return (React.createElement(ContextMenu_1.ContextPane, { style: { minWidth: 'calc(max(220px, min(360px, 80vw)))' } },
        React.createElement(ContextMenu_1.ContextSep, null),
        formattings.map((formatting) => {
            const { behavior } = formatting;
            const data = behavior.data();
            const menu = data.menu;
            const previewText = data.previewText?.(formatting) || '';
            const previewTextFormatted = previewText.length < 20 ? previewText : `${previewText.slice(0, 20)}${nano_theme_1.SYMBOL.ELLIPSIS}`;
            return (React.createElement(ContextMenu_1.ContextItem, { inset: true, key: formatting.key(), icon: menu?.icon?.(), right: React.createElement(FormattingIcon_1.FormattingIcon, { formatting: formatting }), onClick: () => onSelect(formatting) },
                menu?.name ?? behavior.name,
                !!previewTextFormatted && React.createElement("span", { style: { opacity: 0.5 } }, previewTextFormatted)));
        }),
        React.createElement(ContextMenu_1.ContextSep, null)));
};
exports.FormattingList = FormattingList;
//# sourceMappingURL=FormattingList.js.map