import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useMemo } from 'react';
import { ListOl as LineNumbersIcon, TrashBin as RemoveIcon, ArrowUturnCwLeft as WrappingIcon, } from '@gravity-ui/icons';
import { ClipboardButton } from '@gravity-ui/uikit';
import { useLatest } from 'react-use';
import { cn } from "../../../../../classname.js";
import { i18n } from "../../../../../i18n/codeblock/index.js";
import { typedMemo } from "../../../../../react-utils/memo.js";
import { Toolbar, ToolbarDataType } from "../../../../../toolbar/index.js";
import { ToolbarWrapToContext } from "../../../../../toolbar/ToolbarRerender.js";
import { removeNode } from "../../../../../utils/remove-node.js";
import { isTruthy } from "../../../../../utils/truthy.js";
import { CodeBlockNodeAttr } from "../../CodeBlockSpecs/index.js";
import { isNodeHasLineWrapping } from "../plugins/codeBlockLineWrappingPlugin.js";
import { CodeLangSelect } from "./CodeLangSelect.js";
import { isLineNumbersVisible, toggleLineNumbers, toggleLineWrapping } from "./utils.js";
const bToolbar = cn('code-block-toolbar');
const ToolbarMemoized = typedMemo(Toolbar);
export function CodeBlockToolbar({ node, pos, editorView, langItems, mapping, showCodeWrapping, showLineNumbers, rerenderTooltip, }) {
    const posRef = useLatest(pos);
    const nodeRef = useLatest(node);
    const onFocus = useCallback(() => {
        editorView.focus();
    }, [editorView]);
    const toolbarData = useMemo(() => {
        const copyText = () => nodeRef.current.textContent;
        const focus = () => editorView.focus();
        const onLangChange = (value) => {
            editorView.dispatch(editorView.state.tr.setNodeAttribute(posRef.current, CodeBlockNodeAttr.Lang, value));
        };
        return [
            [
                langItems.length > 0 &&
                    {
                        id: 'code-block-type',
                        type: ToolbarDataType.ReactComponent,
                        component: () => (_jsx(CodeLangSelect, { focus: focus, onChange: onLangChange, lang: nodeRef.current.attrs[CodeBlockNodeAttr.Lang], selectItems: langItems, mapping: mapping })),
                        width: 28,
                    },
                showCodeWrapping &&
                    {
                        id: 'code-block-wrapping',
                        icon: { data: WrappingIcon },
                        title: i18n('code_wrapping'),
                        type: ToolbarDataType.SingleButton,
                        isActive: (view) => isNodeHasLineWrapping(view.state, posRef.current),
                        isEnable: () => true,
                        exec: (view) => {
                            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: LineNumbersIcon },
                        title: i18n('show_line_numbers'),
                        type: ToolbarDataType.SingleButton,
                        isActive: () => isLineNumbersVisible(nodeRef.current),
                        isEnable: () => true,
                        exec: (view) => {
                            toggleLineNumbers({
                                pos: posRef.current,
                                node: nodeRef.current,
                                state: view.state,
                                dispatch: view.dispatch,
                            });
                        },
                    },
                {
                    id: 'code-block-copy',
                    type: ToolbarDataType.ReactNodeFn,
                    width: 28,
                    content: () => _jsx(ClipboardButton, { text: copyText }),
                    noRerenderOnUpdate: true,
                },
            ].filter(isTruthy),
            [
                {
                    id: 'code-block-remove',
                    icon: { data: RemoveIcon },
                    title: i18n('remove'),
                    theme: 'danger',
                    type: ToolbarDataType.SingleButton,
                    isActive: () => false,
                    isEnable: () => true,
                    exec: (view) => removeNode({
                        pos: posRef.current,
                        node: nodeRef.current,
                        tr: view.state.tr,
                        dispatch: view.dispatch,
                    }),
                },
            ],
        ];
    }, [
        editorView,
        langItems,
        mapping,
        nodeRef,
        posRef,
        rerenderTooltip,
        showCodeWrapping,
        showLineNumbers,
    ]);
    return (_jsx(ToolbarWrapToContext, { editor: editorView, children: _jsx(ToolbarMemoized, { editor: editorView, focus: onFocus, className: bToolbar(), data: toolbarData }) }));
}
//# sourceMappingURL=CodeBlockToolbar.js.map
