import React, { useEffect, useMemo } from 'react';
import { PopoverMenu } from '@wix/design-system';
import { cairoPageCtaClicked, cairoTpaSCtaClicked } from '@wix/bex-core/bi';
import { useCollectionPageContext, useWixPatternsContainer, } from '@wix/bex-core/react';
import { observer } from 'mobx-react-lite';
import { useExtensionMenuItems } from '../../hooks/useExtensionMenuItems';
import { usePageButtonBiParams } from '../usePageButtonBiParams';
import { useExploreAppsState } from './useExploreAppsState';
function _MoreActionsBase(params) {
    const { items = [], containerId, containerProps, dataHook = 'more-actions', triggerElement, exploreAppsModalProps, biAdditionalInfo, } = params;
    const { pageType, location } = usePageButtonBiParams();
    const state = useExtensionMenuItems({ containerId, containerProps });
    const container = useWixPatternsContainer();
    const pageState = useCollectionPageContext();
    const { reportBi, environment } = container;
    useEffect(() => {
        const notifyLoad = async () => {
            const { loadStart, loadEnd } = await import('@wix/bex-core/bi');
            reportBi(loadStart({
                componentType: 'More actions',
                componentName: environment.componentName,
                additionalFeaturesAvailability: `IsUsingExploreApps: ${!!exploreAppsModalProps}`,
            }));
            reportBi(
            // We dont care about loading time, its just needed for usage purposes
            loadEnd({
                componentType: 'More actions',
                url: window.location.href,
                route: window.location.pathname,
                componentName: environment.componentName,
            }));
        };
        notifyLoad();
    }, []);
    const groupedItems = Array.isArray(items?.[0]) ? items : [items];
    const exploreAppsState = useExploreAppsState(exploreAppsModalProps);
    const allActions = useMemo(() => {
        const groups = [...groupedItems, state.menuItems];
        if (exploreAppsState) {
            groups.push([exploreAppsState.moreActionsMenuItem]);
        }
        const numCtas = groups.reduce((result, group) => result + group.length, 0);
        const flatActions = groups.flat();
        return groups
            .filter((actions) => actions.length !== 0)
            .reduce((result, group, index, array) => {
            return [
                ...result,
                ...group.map((item) => {
                    const { prefixIcon, text, onClick, biName, ...rest } = typeof item === 'function'
                        ? item({ pageState, container })
                        : item;
                    const isTPA = 'type' in item && item.type === 'TPA';
                    const itemAdditionalInfo = 'biAdditionalInfo' in item ? item.biAdditionalInfo : undefined;
                    return (React.createElement(PopoverMenu.MenuItem, { key: index, prefixIcon: prefixIcon, text: text, onClick: () => {
                            reportBi(cairoPageCtaClicked({
                                ctaName: biName,
                                ctaType: 'More Actions Option',
                                location,
                                moreActionsIndex: flatActions.indexOf(item),
                                numCtas,
                                section: isTPA ? 'TPA' : 'Vertical',
                                componentType: 'Page',
                                pageType,
                                additionalInfo: itemAdditionalInfo,
                            }));
                            if (isTPA) {
                                reportBi(cairoTpaSCtaClicked({
                                    appId: item.appId,
                                    componentType: 'Page',
                                    numCtas,
                                    ctaIndex: flatActions.indexOf(item),
                                    ctaName: biName,
                                    location,
                                    tpaComponentId: item.componentId,
                                }));
                            }
                            onClick(isTPA ? state.containerProps : undefined);
                        }, ...rest }));
                }),
                ...(index !== array.length - 1
                    ? [React.createElement(PopoverMenu.Divider, { key: index })]
                    : []),
            ];
        }, []);
    }, [items, state.menuItems, exploreAppsState]);
    return allActions.length === 0 ? null : (React.createElement(React.Fragment, null,
        React.createElement(PopoverMenu, { dataHook: dataHook, onShow: () => {
                reportBi(cairoPageCtaClicked({
                    ctaName: 'More Actions',
                    ctaType: 'secondary page dropdown',
                    location,
                    componentType: 'Page',
                    pageType,
                    additionalInfo: biAdditionalInfo,
                }));
            }, minWidth: 240, textSize: "medium", triggerElement: triggerElement, appendTo: "parent", zIndex: 1101 }, allActions),
        exploreAppsState && React.createElement(exploreAppsState.Modal, { state: exploreAppsState })));
}
export const MoreActionsBase = observer(_MoreActionsBase);
//# sourceMappingURL=MoreActionsBase.js.map