"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CodeBlockToolbar = CodeBlockToolbar;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const react_use_1 = require("react-use");
const classname_1 = require("../../../../../classname.js");
const codeblock_1 = require("../../../../../i18n/codeblock/index.js");
const memo_1 = require("../../../../../react-utils/memo.js");
const toolbar_1 = require("../../../../../toolbar/index.js");
const ToolbarRerender_1 = require("../../../../../toolbar/ToolbarRerender.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 codeBlockLineWrappingPlugin_1 = require("../plugins/codeBlockLineWrappingPlugin.js");
const CodeLangSelect_1 = require("./CodeLangSelect.js");
const utils_1 = require("./utils.js");
const bToolbar = (0, classname_1.cn)('code-block-toolbar');
const ToolbarMemoized = (0, memo_1.typedMemo)(toolbar_1.Toolbar);
function CodeBlockToolbar({ node, pos, editorView, langItems, mapping, showCodeWrapping, showLineNumbers, rerenderTooltip, }) {
    const posRef = (0, react_use_1.useLatest)(pos);
    const nodeRef = (0, react_use_1.useLatest)(node);
    const onFocus = (0, react_1.useCallback)(() => {
        editorView.focus();
    }, [editorView]);
    const toolbarData = (0, react_1.useMemo)(() => {
        const copyText = () => nodeRef.current.textContent;
        const focus = () => editorView.focus();
        const onLangChange = (value) => {
            editorView.dispatch(editorView.state.tr.setNodeAttribute(posRef.current, CodeBlockSpecs_1.CodeBlockNodeAttr.Lang, value));
        };
        return [
            [
                langItems.length > 0 &&
                    {
                        id: 'code-block-type',
                        type: toolbar_1.ToolbarDataType.ReactComponent,
                        component: () => ((0, jsx_runtime_1.jsx)(CodeLangSelect_1.CodeLangSelect, { focus: focus, onChange: onLangChange, lang: nodeRef.current.attrs[CodeBlockSpecs_1.CodeBlockNodeAttr.Lang], 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: (view) => (0, codeBlockLineWrappingPlugin_1.isNodeHasLineWrapping)(view.state, posRef.current),
                        isEnable: () => true,
                        exec: (view) => {
                            (0, utils_1.toggleLineWrapping)({
                                pos: posRef.current,
                                node: nodeRef.current,
                                state: view.state,
                                dispatch: view.dispatch,
                            });
                            // forcing rerender because editor's toolbar isn't updated when the decorations change
                            rerenderTooltip?.();
                        },
                    },
                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)(nodeRef.current),
                        isEnable: () => true,
                        exec: (view) => {
                            (0, utils_1.toggleLineNumbers)({
                                pos: posRef.current,
                                node: nodeRef.current,
                                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: copyText }),
                    noRerenderOnUpdate: true,
                },
            ].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: (view) => (0, remove_node_1.removeNode)({
                        pos: posRef.current,
                        node: nodeRef.current,
                        tr: view.state.tr,
                        dispatch: view.dispatch,
                    }),
                },
            ],
        ];
    }, [
        editorView,
        langItems,
        mapping,
        nodeRef,
        posRef,
        rerenderTooltip,
        showCodeWrapping,
        showLineNumbers,
    ]);
    return ((0, jsx_runtime_1.jsx)(ToolbarRerender_1.ToolbarWrapToContext, { editor: editorView, children: (0, jsx_runtime_1.jsx)(ToolbarMemoized, { editor: editorView, focus: onFocus, className: bToolbar(), data: toolbarData }) }));
}
//# sourceMappingURL=CodeBlockToolbar.js.map
