"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 classname_1 = require("../../../../../classname.js");
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 truthy_1 = require("../../../../../utils/truthy.js");
const CodeBlockSpecs_1 = require("../../CodeBlockSpecs/index.js");
const const_1 = require("../const.js");
const codeBlockLineWrappingPlugin_1 = require("../plugins/codeBlockLineWrappingPlugin.js");
const utils_1 = require("./utils.js");
require("./TooltipView.css");
const bCodeBlock = (0, classname_1.cn)('code-block');
const bToolbar = (0, classname_1.cn)('code-block-toolbar');
const CodeMenu = ({ view, pos, node, selectItems, mapping }) => {
    const lang = node.attrs[CodeBlockSpecs_1.CodeBlockNodeAttr.Lang];
    const value = mapping[lang] || lang || const_1.PlainTextLang;
    const handleClick = (type) => {
        view.focus();
        if (type === value)
            return;
        view.dispatch(view.state.tr.setNodeAttribute(pos, 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: bCodeBlock('select-popup'), className: bCodeBlock('select-button'), renderEmptyOptions: () => ((0, jsx_runtime_1.jsx)("div", { className: bCodeBlock('select-empty'), children: (0, codeblock_1.i18n)('empty_option') })) }));
};
const codeLangSelectTooltipViewCreator = (view, langItems, mapping = {}, { showCodeWrapping, showLineNumbers }) => {
    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 }, _onChange, _forceEdit, _onOutsideClick, rerender) => {
            return ((0, jsx_runtime_1.jsx)(toolbar_1.Toolbar, { editor: {}, focus: () => view.focus(), className: bToolbar(), data: [
                    [
                        langItems.length > 0 &&
                            {
                                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,
                            },
                        showCodeWrapping &&
                            {
                                id: 'code-block-wrapping',
                                icon: { data: icons_1.ArrowUturnCwLeft },
                                title: (0, codeblock_1.i18n)('code_wrapping'),
                                type: toolbar_1.ToolbarDataType.SingleButton,
                                isActive: () => (0, codeBlockLineWrappingPlugin_1.isNodeHasLineWrapping)(view.state, pos),
                                isEnable: () => true,
                                exec: () => {
                                    (0, utils_1.toggleLineWrapping)({
                                        pos,
                                        node,
                                        state: view.state,
                                        dispatch: view.dispatch,
                                    });
                                    // forcing rerender because editor's toolbar isn't updated when the decorations change
                                    rerender?.();
                                },
                            },
                        showLineNumbers &&
                            {
                                id: 'code-block-linenumbers',
                                icon: { data: icons_1.ListOl },
                                title: (0, codeblock_1.i18n)('show_line_numbers'),
                                type: toolbar_1.ToolbarDataType.SingleButton,
                                isActive: () => (0, utils_1.isLineNumbersVisible)(node),
                                isEnable: () => true,
                                exec: () => (0, utils_1.toggleLineNumbers)({
                                    pos,
                                    node,
                                    state: view.state,
                                    dispatch: view.dispatch,
                                }),
                            },
                        {
                            id: 'code-block-copy',
                            type: toolbar_1.ToolbarDataType.ReactNodeFn,
                            width: 28,
                            content: () => (0, jsx_runtime_1.jsx)(uikit_1.ClipboardButton, { text: node.textContent }),
                        },
                    ].filter(truthy_1.isTruthy),
                    [
                        {
                            id: 'code-block-remove',
                            icon: { data: icons_1.TrashBin },
                            title: (0, codeblock_1.i18n)('remove'),
                            theme: 'danger',
                            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
