"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.YfmNoteToolbar = YfmNoteToolbar;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const icons_1 = require("@gravity-ui/icons");
const react_use_1 = require("react-use");
const yfm_note_1 = require("../../../../../i18n/yfm-note/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 const_1 = require("../../const.js");
require("./YfmNoteToolbar.css");
const ToolbarMemoized = (0, memo_1.typedMemo)(toolbar_1.Toolbar);
var YfmNoteType;
(function (YfmNoteType) {
    YfmNoteType["tip"] = "tip";
    YfmNoteType["info"] = "info";
    YfmNoteType["warning"] = "warning";
    YfmNoteType["alert"] = "alert";
})(YfmNoteType || (YfmNoteType = {}));
const isEnable = () => true;
const changeType = (type) => ({ node, pos, dispatch, tr }) => {
    dispatch(tr.setNodeMarkup(pos, null, {
        ...node.attrs,
        [const_1.NoteAttrs.Class]: `yfm-note yfm-accent-${type}`,
        [const_1.NoteAttrs.Type]: type,
    }));
};
function YfmNoteToolbar({ pos, node, editorView }) {
    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)(() => {
        return [
            [YfmNoteType.info, YfmNoteType.tip, YfmNoteType.warning, YfmNoteType.alert].map((type) => ({
                id: `note-type-${type}`,
                icon: { data: icons_1.CircleInfo },
                title: (0, yfm_note_1.i18n)(type),
                type: toolbar_1.ToolbarDataType.SingleButton,
                isActive: () => nodeRef.current.attrs[const_1.NoteAttrs.Type] === type,
                isEnable,
                exec: (view) => changeType(type)({
                    pos: posRef.current,
                    node: nodeRef.current,
                    tr: view.state.tr,
                    dispatch: view.dispatch,
                }),
            })),
            [
                {
                    id: 'note-remove',
                    icon: { data: icons_1.TrashBin },
                    title: (0, yfm_note_1.i18n)('remove'),
                    type: toolbar_1.ToolbarDataType.SingleButton,
                    theme: 'danger',
                    isActive: () => false,
                    isEnable,
                    exec: (view) => (0, remove_node_1.removeNode)({
                        pos: posRef.current,
                        node: nodeRef.current,
                        tr: view.state.tr,
                        dispatch: view.dispatch,
                    }),
                },
            ],
        ];
    }, [nodeRef, posRef]);
    return ((0, jsx_runtime_1.jsx)(ToolbarRerender_1.ToolbarWrapToContext, { editor: editorView, children: (0, jsx_runtime_1.jsx)(ToolbarMemoized, { editor: editorView, focus: onFocus, 
            // the yfm class allows to access css variables
            // https://github.com/diplodoc-platform/transform/blob/master/src/scss/_common.scss#L17
            className: "yfm g-md-yfm-note-toolbar", qa: "g-md-toolbar-yfm-note", data: toolbarData }) }));
}
//# sourceMappingURL=YfmNoteToolbar.js.map
