"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolbarView = ToolbarView;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const layout_1 = require("../common/layout.js");
const memo_1 = require("../react-utils/memo.js");
const utils_1 = require("../utils/index.js");
const menubar_1 = require("../i18n/menubar/index.js");
const useSticky_1 = require("../react-utils/useSticky.js");
const toolbar_1 = require("../toolbar/index.js");
const sticky_1 = require("./sticky/index.js");
const MemoizedFlexibleToolbar = (0, memo_1.typedMemo)(toolbar_1.FlexToolbar);
function ToolbarView({ editor, editorMode, toolbarEditor, toolbarConfig, toolbarDisplay, hiddenActionsConfig, settingsVisible, className, children, stickyToolbar, qa, }) {
    const wrapperRef = (0, react_1.useRef)(null);
    const isStickyActive = (0, useSticky_1.useSticky)(wrapperRef) && stickyToolbar;
    const mobile = editor.mobile;
    const clickHandle = (0, react_1.useCallback)((id, attrs) => editor.emit('toolbar-action', { id, attrs, editorMode }), [editor, editorMode]);
    const toolbarProviderValue = (0, react_1.useMemo)(() => ({
        editor: toolbarEditor,
        eventBus: new utils_1.EventEmitter(),
    }), [toolbarEditor]);
    const handleFocus = (0, react_1.useCallback)(() => {
        editor.focus();
    }, [editor]);
    (0, react_1.useLayoutEffect)(() => {
        const onRerender = () => {
            toolbarProviderValue.eventBus.emit('update', null);
        };
        editor.on('rerender-toolbar', onRerender);
        return () => {
            editor.off('rerender-toolbar', onRerender);
        };
    }, [editor, toolbarProviderValue]);
    return ((0, jsx_runtime_1.jsxs)("div", { "data-qa": qa, ref: wrapperRef, className: sticky_1.stickyCn.toolbar({
            withSettings: settingsVisible,
            stickyActive: isStickyActive,
            isSticky: stickyToolbar,
        }, [className]), "data-layout": layout_1.LAYOUT.STICKY_TOOLBAR, children: [(0, jsx_runtime_1.jsx)(toolbar_1.ToolbarProvider, { value: toolbarProviderValue, children: (0, jsx_runtime_1.jsx)(MemoizedFlexibleToolbar, { data: toolbarConfig, hiddenActions: hiddenActionsConfig, editor: toolbarEditor, focus: handleFocus, dotsTitle: (0, menubar_1.i18n)('more_action'), onClick: clickHandle, display: toolbarDisplay, disableTooltip: mobile, disableHotkey: mobile, disablePreview: mobile }) }), children] }));
}
//# sourceMappingURL=ToolbarView.js.map
