import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useMemo } from 'react';
import { ChevronDown } from '@gravity-ui/icons';
import { ActionTooltip, Button, Icon, Menu, Popup, } from '@gravity-ui/uikit';
import { cn } from "../../classname.js";
import { groupBy, isFunction } from "../../lodash.js";
import { useBooleanState, useElementState } from "../../react-utils/hooks.js";
import { ToolbarTooltipDelay } from "../../toolbar/index.js";
import "./ToolbarButtonWithPopupMenu.css";
const b = cn('toolbar-button-with-popup-menu');
export const ToolbarButtonWithPopupMenu = ({ disablePortal, className, focus, onClick, icon, iconClassName, chevronIconClassName, title, menuItems, _selectionType, }) => {
    const [anchorElement, setAnchorElement] = useElementState();
    const [open, , hide, toggleOpen] = useBooleanState(false);
    const groups = useMemo(() => groupBy(menuItems.map((i) => ({ ...i, group: i.group || '' })), 'group'), [menuItems]);
    const someActive = menuItems.some((item) => !item.ignoreActive && item.action.isActive() === true);
    const everyDisabled = menuItems.every((item) => item.action.isEnable() === false);
    const popupOpen = everyDisabled ? false : open;
    const shouldForceHide = open && !popupOpen;
    useEffect(() => {
        if (shouldForceHide) {
            hide();
        }
    }, [hide, shouldForceHide]);
    const [btnView, btnSelected] = _selectionType === 'light'
        ? [
            popupOpen ? 'normal' : someActive ? 'flat-action' : 'flat',
            popupOpen && someActive,
        ]
        : [someActive || popupOpen ? 'normal' : 'flat', someActive];
    return (_jsxs(_Fragment, { children: [_jsx(ActionTooltip, { disabled: popupOpen, openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, title: isFunction(title) ? title() : title, children: _jsxs(Button, { size: "m", ref: setAnchorElement, view: btnView, selected: btnSelected, disabled: everyDisabled, className: b(null, [className]), onClick: toggleOpen, children: [_jsx(Icon, { data: icon.data, size: icon.size, className: iconClassName }), '', _jsx(Icon, { data: ChevronDown, className: chevronIconClassName })] }) }), _jsx(Popup, { open: popupOpen, disablePortal: disablePortal, anchorElement: anchorElement, onOpenChange: (open) => {
                    if (!open)
                        hide();
                }, children: _jsx(Menu, { size: "l", children: Object.entries(groups).map(([label, items], key) => {
                        return (_jsx(Menu.Group, { label: label, className: b('menu-group'), children: items.map(({ id, icon, iconSize = 16, action, text, iconClassname }) => (_jsx(Menu.Item, { iconStart: _jsx(Icon, { data: icon, size: iconSize, className: iconClassname }), active: action.isActive(), disabled: !action.isEnable(), onClick: () => {
                                    hide();
                                    focus();
                                    action.run();
                                    onClick?.(id);
                                }, extraProps: { 'aria-label': text }, children: text }, id))) }, key));
                    }) }) })] }));
};
//# sourceMappingURL=ToolbarButtonWithPopupMenu.js.map
