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