import * as React from 'react';
import { ContextPane, ContextItem, ContextSep } from 'nice-ui/lib/4-card/ContextMenu';
import { SYMBOL } from 'nano-theme';
import { FormattingIcon } from '../views/icon/FormattingIcon';
export const FormattingList = ({ formattings, onSelect }) => {
    if (!formattings.length)
        return;
    return (React.createElement(ContextPane, { style: { minWidth: 'calc(max(220px, min(360px, 80vw)))' } },
        React.createElement(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)}${SYMBOL.ELLIPSIS}`;
            return (React.createElement(ContextItem, { inset: true, key: formatting.key(), icon: menu?.icon?.(), right: React.createElement(FormattingIcon, { formatting: formatting }), onClick: () => onSelect(formatting) },
                menu?.name ?? behavior.name,
                !!previewTextFormatted && React.createElement("span", { style: { opacity: 0.5 } }, previewTextFormatted)));
        }),
        React.createElement(ContextSep, null)));
};
//# sourceMappingURL=FormattingList.js.map