"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DesignMenuBarView = void 0;
const tslib_1 = require("tslib");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const React = tslib_1.__importStar(require("react"));
const ide_core_browser_1 = require("@opensumi/ide-core-browser");
const components_1 = require("@opensumi/ide-core-browser/lib/components");
const ai_native_1 = require("@opensumi/ide-core-browser/lib/components/ai-native");
const constants_1 = require("@opensumi/ide-core-browser/lib/layout/constants");
const view_id_1 = require("@opensumi/ide-core-browser/lib/layout/view-id");
const next_1 = require("@opensumi/ide-core-browser/lib/menu/next");
const ide_core_common_1 = require("@opensumi/ide-core-common");
const ide_main_layout_1 = require("@opensumi/ide-main-layout");
const common_1 = require("../../common");
const logo_svg_1 = tslib_1.__importDefault(require("./logo.svg"));
const menu_bar_module_less_1 = tslib_1.__importDefault(require("./menu-bar.module.less"));
const DesignMenuBarRender = () => {
    const contextmenuService = (0, ide_core_browser_1.useInjectable)(next_1.AbstractContextMenuService);
    const designLayoutConfig = (0, ide_core_browser_1.useInjectable)(constants_1.DesignLayoutConfig);
    const ctxMenuRenderer = (0, ide_core_browser_1.useInjectable)(next_1.ICtxMenuRenderer);
    const iconRef = React.useRef(null);
    const [anchor, setAnchor] = React.useState(undefined);
    React.useEffect(() => {
        handleRefRect();
    }, []);
    const handleRefRect = React.useCallback((cb) => {
        requestAnimationFrame(() => {
            if (iconRef.current) {
                const rect = iconRef.current.getBoundingClientRect();
                const { x, y, width, height } = rect;
                const _anchor = {
                    x,
                    y: y + height,
                };
                setAnchor(_anchor);
                if (cb) {
                    cb(_anchor);
                }
            }
        });
    }, [iconRef.current]);
    const extraTopMenus = React.useMemo(() => contextmenuService.createMenu({
        id: next_1.MenuId.DesignMenuBarTopExtra,
    }), [contextmenuService]);
    const handleClick = React.useCallback(() => {
        if (!anchor) {
            return;
        }
        const menuNodes = extraTopMenus.getMergedMenuNodes();
        extraTopMenus.dispose();
        handleRefRect((_anchor) => {
            ctxMenuRenderer.show({
                anchor: _anchor,
                menuNodes,
            });
        });
    }, [anchor, extraTopMenus]);
    const logo = React.useMemo(() => designLayoutConfig.menubarLogo || logo_svg_1.default, [designLayoutConfig.menubarLogo]);
    return (React.createElement(React.Fragment, null,
        React.createElement(ai_native_1.EnhanceIcon, { wrapperClassName: menu_bar_module_less_1.default.ai_enhance_menu, ref: iconRef, onClick: handleClick },
            React.createElement("div", { className: menu_bar_module_less_1.default.logo_container },
                React.createElement("img", { className: menu_bar_module_less_1.default.extra_top_icon, src: logo, alt: '' }),
                React.createElement(components_1.Icon, { className: (0, classnames_1.default)((0, ide_core_browser_1.getIcon)('down'), menu_bar_module_less_1.default.caret_icon) })))));
};
const DesignMenuBarView = () => {
    const commandService = (0, ide_core_browser_1.useInjectable)(ide_core_common_1.CommandService);
    const mainLayoutService = (0, ide_core_browser_1.useInjectable)(ide_main_layout_1.IMainLayoutService);
    const aiNativeConfigService = (0, ide_core_browser_1.useInjectable)(ide_core_browser_1.AINativeConfigService);
    const [isLeftPanelVisible, setIsVisiablePanel] = React.useState(false);
    React.useEffect(() => {
        requestAnimationFrame(() => {
            setIsVisiablePanel(isVisiable());
        });
        const tabbarService = mainLayoutService.getTabbarService(ide_core_browser_1.SlotLocation.left);
        const toDispose = tabbarService.onCurrentChange(({ previousId, currentId }) => {
            if (previousId && !currentId) {
                setIsVisiablePanel(false);
            }
            else if (!previousId && currentId) {
                setIsVisiablePanel(true);
            }
        });
        return () => {
            toDispose.dispose();
        };
    }, []);
    const handleLeftMenuVisiable = React.useCallback(() => {
        commandService.executeCommand('main-layout.left-panel.toggle');
        requestAnimationFrame(() => {
            setIsVisiablePanel(isVisiable());
        });
    }, []);
    const isVisiable = React.useCallback(() => {
        const tabbarService = mainLayoutService.getTabbarService(ide_core_browser_1.SlotLocation.left);
        return !!tabbarService.currentContainerId;
    }, [mainLayoutService]);
    return (React.createElement("div", { id: view_id_1.VIEW_CONTAINERS.MENUBAR, className: menu_bar_module_less_1.default.menu_bar_view, style: { height: aiNativeConfigService.layoutViewSize.menubarHeight } },
        React.createElement("div", { className: menu_bar_module_less_1.default.container },
            React.createElement("div", { className: menu_bar_module_less_1.default.left },
                React.createElement(ai_native_1.EnhanceIcon, { wrapperClassName: menu_bar_module_less_1.default.enhance_menu, icon: isLeftPanelVisible ? 'left-nav-open' : 'left-nav-close', onClick: handleLeftMenuVisiable }),
                React.createElement("span", { className: menu_bar_module_less_1.default.dividing }),
                React.createElement("div", { className: menu_bar_module_less_1.default.top_menus_bar },
                    React.createElement(DesignMenuBarRender, null)),
                React.createElement(ide_core_browser_1.SlotRenderer, { id: 'design-menubar-left', slot: common_1.DESIGN_MENU_BAR_LEFT, flex: 1 })),
            React.createElement("div", { className: menu_bar_module_less_1.default.right },
                React.createElement(ide_core_browser_1.SlotRenderer, { id: 'design-menubar-right', slot: common_1.DESIGN_MENU_BAR_RIGHT, flex: 1 })))));
};
exports.DesignMenuBarView = DesignMenuBarView;
//# sourceMappingURL=menu-bar.view.js.map