import React, { useCallback, useContext } from 'react';
import SidebarItemButtonNext from '../../SidebarItemNext/SidebarItemButtonNext';
import { SidebarNextContext } from '../../SidebarNext/SidebarNextContext';
import { dataHooks, getCompoundDataHook } from '../constants';
import { st, classes } from '../SidebarSubMenuNext.st.css.js';
import { ContextMenuPopover } from './ContextMenuPopover';
import { getSuffixWithChevron } from './common';
export const ContextMenu = ({ title, suffix, prefix, children, dataHook, itemKey, disabled, onClick, onExpand, onCollapse, onQuickNavOpen, ...asComponentProps }) => {
    const context = useContext(SidebarNextContext);
    const selected = context.selectedPath.includes(itemKey);
    const handleClick = useCallback(event => {
        context.closeQuickNav?.();
        // @ts-ignore
        onClick?.(event, itemKey); // FIXME: this was never typed but implemented originally
    }, 
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [context.closeQuickNav, onClick, itemKey]);
    return (React.createElement(ContextMenuPopover, { dataHook: getCompoundDataHook(dataHook, dataHooks.submenuPopover), element: React.createElement(SidebarItemButtonNext, { prefix: prefix, suffix: getSuffixWithChevron(suffix), onClick: handleClick, disabled: disabled, itemKey: itemKey, dataHook: getCompoundDataHook(dataHook, dataHooks.sidebarItem), className: st(classes.subMenu, { animation: 'closed', selected }), ...asComponentProps }, title), content: React.createElement(SidebarNextContext.Provider, { value: {
                ...context,
                level: context.level + 1,
                parent: 'inContextMenu',
                inert: true, // popover items are not focusable
                isFirstLevelWithPrefix: context.level === 1 ? !!prefix : context.isFirstLevelWithPrefix,
            } }, children), disabled: disabled, onShow: onQuickNavOpen }));
};
//# sourceMappingURL=ContextMenu.js.map