"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolbarButtonWithPopupMenu = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const classname_1 = require("../../classname.js");
const lodash_1 = require("../../lodash.js");
const hooks_1 = require("../../react-utils/hooks.js");
const toolbar_1 = require("../../toolbar/index.js");
require("./ToolbarButtonWithPopupMenu.css");
const b = (0, classname_1.cn)('toolbar-button-with-popup-menu');
const ToolbarButtonWithPopupMenu = ({ disablePortal, className, focus, onClick, icon, iconClassName, chevronIconClassName, title, menuItems, _selectionType, }) => {
    const [anchorElement, setAnchorElement] = (0, hooks_1.useElementState)();
    const [open, , hide, toggleOpen] = (0, hooks_1.useBooleanState)(false);
    const groups = (0, react_1.useMemo)(() => (0, lodash_1.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;
    (0, react_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.ActionTooltip, { disabled: popupOpen, openDelay: toolbar_1.ToolbarTooltipDelay.Open, closeDelay: toolbar_1.ToolbarTooltipDelay.Close, title: (0, lodash_1.isFunction)(title) ? title() : title, children: (0, jsx_runtime_1.jsxs)(uikit_1.Button, { size: "m", ref: setAnchorElement, view: btnView, selected: btnSelected, disabled: everyDisabled, className: b(null, [className]), onClick: toggleOpen, children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icon.data, size: icon.size, className: iconClassName }), '', (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ChevronDown, className: chevronIconClassName })] }) }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: popupOpen, disablePortal: disablePortal, anchorElement: anchorElement, onOpenChange: (open) => {
                    if (!open)
                        hide();
                }, children: (0, jsx_runtime_1.jsx)(uikit_1.Menu, { size: "l", children: Object.entries(groups).map(([label, items], key) => {
                        return ((0, jsx_runtime_1.jsx)(uikit_1.Menu.Group, { label: label, className: b('menu-group'), children: items.map(({ id, icon, iconSize = 16, action, text, iconClassname }) => ((0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { iconStart: (0, jsx_runtime_1.jsx)(uikit_1.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));
                    }) }) })] }));
};
exports.ToolbarButtonWithPopupMenu = ToolbarButtonWithPopupMenu;
//# sourceMappingURL=ToolbarButtonWithPopupMenu.js.map
