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