import { jsx as _jsx } from "react/jsx-runtime";
import { ListOl as LineNumbersIcon, TrashBin as RemoveIcon, ArrowUturnCwLeft as WrappingIcon, } from '@gravity-ui/icons';
import { ClipboardButton, Select } from '@gravity-ui/uikit';
import { cn } from "../../../../../classname.js";
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 { isTruthy } from "../../../../../utils/truthy.js";
import { CodeBlockNodeAttr, codeBlockType } from "../../CodeBlockSpecs/index.js";
import { PlainTextLang } from "../const.js";
import { isNodeHasLineWrapping } from "../plugins/codeBlockLineWrappingPlugin.js";
import { isLineNumbersVisible, toggleLineNumbers, toggleLineWrapping } from "./utils.js";
import "./TooltipView.css";
const bCodeBlock = cn('code-block');
const bToolbar = cn('code-block-toolbar');
const CodeMenu = ({ view, pos, node, selectItems, mapping }) => {
    const lang = node.attrs[CodeBlockNodeAttr.Lang];
    const value = mapping[lang] || lang || PlainTextLang;
    const handleClick = (type) => {
        view.focus();
        if (type === value)
            return;
        view.dispatch(view.state.tr.setNodeAttribute(pos, 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: bCodeBlock('select-popup'), className: bCodeBlock('select-button'), renderEmptyOptions: () => (_jsx("div", { className: bCodeBlock('select-empty'), children: i18n('empty_option') })) }));
};
export const codeLangSelectTooltipViewCreator = (view, langItems, mapping = {}, { showCodeWrapping, showLineNumbers }) => {
    return new BaseTooltipPluginView(view, {
        idPrefix: 'code-block-tooltip',
        nodeType: codeBlockType(view.state.schema),
        popupPlacement: ['bottom', 'top'],
        content: (view, { node, pos }, _onChange, _forceEdit, _onOutsideClick, rerender) => {
            return (_jsx(Toolbar, { editor: {}, focus: () => view.focus(), className: bToolbar(), data: [
                    [
                        langItems.length > 0 &&
                            {
                                id: 'code-block-type',
                                type: ToolbarDataType.ReactComponent,
                                component: () => (_jsx(CodeMenu, { view: view, pos: pos, node: node, selectItems: langItems, mapping: mapping })),
                                width: 28,
                            },
                        showCodeWrapping &&
                            {
                                id: 'code-block-wrapping',
                                icon: { data: WrappingIcon },
                                title: i18n('code_wrapping'),
                                type: ToolbarDataType.SingleButton,
                                isActive: () => isNodeHasLineWrapping(view.state, pos),
                                isEnable: () => true,
                                exec: () => {
                                    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: LineNumbersIcon },
                                title: i18n('show_line_numbers'),
                                type: ToolbarDataType.SingleButton,
                                isActive: () => isLineNumbersVisible(node),
                                isEnable: () => true,
                                exec: () => toggleLineNumbers({
                                    pos,
                                    node,
                                    state: view.state,
                                    dispatch: view.dispatch,
                                }),
                            },
                        {
                            id: 'code-block-copy',
                            type: ToolbarDataType.ReactNodeFn,
                            width: 28,
                            content: () => _jsx(ClipboardButton, { text: node.textContent }),
                        },
                    ].filter(isTruthy),
                    [
                        {
                            id: 'code-block-remove',
                            icon: { data: RemoveIcon },
                            title: i18n('remove'),
                            theme: 'danger',
                            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
