import { PopoverMenu, Button } from '@wix/design-system';
import React, { useMemo, useCallback, } from 'react';
import { ChevronDown } from '@wix/wix-ui-icons-common';
import { DisabledTooltip } from '../DisabledTooltip';
function isActionSubitemLabel(item) {
    return typeof item === 'object' && item !== null && 'sectionTitle' in item;
}
export function ActionPopover(props) {
    const { actionItem, size, priority, onPopoverClick, fullWidth } = props;
    const { dataHook, subItems, popoverMenuProps } = actionItem;
    const createCombinedRef = useCallback((wdsRef) => {
        return (wrapper) => {
            const buttonEl = wrapper?.querySelector('button') ?? null;
            if (wdsRef) {
                wdsRef.current = buttonEl;
            }
            const externalRef = actionItem.ref;
            if (externalRef) {
                if (typeof externalRef === 'function') {
                    externalRef(buttonEl);
                }
                else {
                    externalRef.current =
                        buttonEl;
                }
            }
        };
    }, [actionItem.ref]);
    const allActions = useMemo(() => {
        return subItems
            ?.filter((subItemGroup) => subItemGroup?.length)
            .reduce((result, group, index, array) => {
            const nodes = [];
            group.forEach((item, itemIndex) => {
                if (isActionSubitemLabel(item)) {
                    nodes.push(React.createElement(PopoverMenu.SectionTitle, { key: `section-${index}-${itemIndex}`, title: item.sectionTitle, dataHook: item.dataHook }));
                }
                else {
                    nodes.push(React.createElement(PopoverMenu.MenuItem, { prefixIcon: item.prefixIcon, disabled: item.disabled, text: item.label, key: item.label, subtitle: item.subtitle, dataHook: item.dataHook, onClick: item.onClick }));
                }
            });
            if (index !== array.length - 1) {
                nodes.push(React.createElement(PopoverMenu.Divider, { key: `divider-${index}` }));
            }
            return [...result, ...nodes];
        }, []);
    }, [subItems]);
    return (React.createElement(PopoverMenu, { ...popoverMenuProps, dataHook: dataHook ? `${dataHook}-popover` : undefined, triggerElement: ({ toggle, ref: wdsRef }) => (
        // Wrapper div needed due to type mismatch: PopoverMenu expects RefObject<HTMLElement>
        // but Button's ref returns a class instance, not an HTMLElement.
        React.createElement("div", { ref: createCombinedRef(wdsRef), style: { display: 'contents' } },
            React.createElement(DisabledTooltip, { content: actionItem.tooltip, dataHook: dataHook ? `${dataHook}-tooltip` : undefined },
                React.createElement(Button, { skin: "standard", priority: priority, size: size, fullWidth: fullWidth, dataHook: actionItem.dataHook, onClick: () => {
                        onPopoverClick?.();
                        toggle();
                    }, ellipsis: true, prefixIcon: actionItem.prefixIcon, disabled: actionItem.disabled, suffixIcon: React.createElement(ChevronDown, null) }, actionItem.label)))) }, allActions));
}
//# sourceMappingURL=ActionPopover.js.map