import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useMemo } from 'react';
import { CircleInfo, TrashBin } from '@gravity-ui/icons';
import { useLatest } from 'react-use';
import { i18n } from "../../../../../i18n/yfm-note/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 { NoteAttrs } from "../../const.js";
import "./YfmNoteToolbar.css";
const ToolbarMemoized = typedMemo(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,
        [NoteAttrs.Class]: `yfm-note yfm-accent-${type}`,
        [NoteAttrs.Type]: type,
    }));
};
export function YfmNoteToolbar({ pos, node, editorView }) {
    const posRef = useLatest(pos);
    const nodeRef = useLatest(node);
    const onFocus = useCallback(() => {
        editorView.focus();
    }, [editorView]);
    const toolbarData = useMemo(() => {
        return [
            [YfmNoteType.info, YfmNoteType.tip, YfmNoteType.warning, YfmNoteType.alert].map((type) => ({
                id: `note-type-${type}`,
                icon: { data: CircleInfo },
                title: i18n(type),
                type: ToolbarDataType.SingleButton,
                isActive: () => nodeRef.current.attrs[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: TrashBin },
                    title: i18n('remove'),
                    type: ToolbarDataType.SingleButton,
                    theme: 'danger',
                    isActive: () => false,
                    isEnable,
                    exec: (view) => removeNode({
                        pos: posRef.current,
                        node: nodeRef.current,
                        tr: view.state.tr,
                        dispatch: view.dispatch,
                    }),
                },
            ],
        ];
    }, [nodeRef, posRef]);
    return (_jsx(ToolbarWrapToContext, { editor: editorView, children: _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
