import { jsx as _jsx } from "react/jsx-runtime";
import { TrashBin } from '@gravity-ui/icons';
import { Select } from '@gravity-ui/uikit';
import { i18n } from "../../../../../i18n/codeblock/index.js";
import { i18n as i18nPlaceholder } from "../../../../../i18n/placeholder/index.js";
import { BaseTooltipPluginView } from "../../../../../plugins/BaseTooltip/index.js";
import { Toolbar, ToolbarDataType } from "../../../../../toolbar/index.js";
import { removeNode } from "../../../../../utils/remove-node.js";
import { CodeBlockNodeAttr, codeBlockType } from "../../CodeBlockSpecs/index.js";
import "./TooltipView.css";
const CodeMenu = ({ view, pos, node, selectItems, mapping }) => {
    const lang = node.attrs[CodeBlockNodeAttr.Lang];
    const value = mapping[lang] ?? lang;
    const handleClick = (type) => {
        view.focus();
        if (type === value)
            return;
        view.dispatch(view.state.tr.setNodeMarkup(pos, null, {
            [CodeBlockNodeAttr.Lang]: type,
        }));
    };
    return (_jsx(Select, { size: "m", width: "max", disablePortal: true, value: [value], onUpdate: (v) => handleClick(v[0]), options: selectItems, filterable: true, filterPlaceholder: i18nPlaceholder('select_filter'), popupClassName: "g-md-code-block__select-popup", className: "g-md-code-block__select-button", renderEmptyOptions: () => (_jsx("div", { className: "g-md-code-block__select-empty", children: i18n('empty_option') })) }));
};
export const codeLangSelectTooltipViewCreator = (view, langItems, mapping = {}) => {
    return new BaseTooltipPluginView(view, {
        idPrefix: 'code-block-tooltip',
        nodeType: codeBlockType(view.state.schema),
        popupPlacement: ['bottom', 'top'],
        content: (view, { node, pos }) => (_jsx(Toolbar, { editor: {}, focus: () => view.focus(), className: "g-md-code-block-toolbar", data: [
                [
                    {
                        id: 'code-block-type',
                        type: ToolbarDataType.ReactComponent,
                        component: () => (_jsx(CodeMenu, { view: view, pos: pos, node: node, selectItems: langItems, mapping: mapping })),
                        width: 28,
                    },
                ],
                [
                    {
                        id: 'code-block-remove',
                        icon: { data: TrashBin },
                        title: i18n('remove'),
                        type: ToolbarDataType.SingleButton,
                        isActive: () => false,
                        isEnable: () => true,
                        exec: () => removeNode({
                            pos: pos,
                            node: node,
                            tr: view.state.tr,
                            dispatch: view.dispatch.bind(view),
                        }),
                    },
                ],
            ] })),
    });
};
//# sourceMappingURL=index.js.map
