import { Box, Divider, TableToolbar, Text, TextButton, } from '@wix/design-system';
import React, { cloneElement, useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { st, classes } from './MultiBulkActionToolbar.st.css.js';
import { ActionControl, ActionPopover } from '../ActionControl';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { MultiBulkActionToolbarState } from './MultiBulkActionToolbarState';
import { useExtensionMenuItems } from '../../hooks/useExtensionMenuItems';
import { BulkActionContainer } from './BulkActionContainer';
import { useIsMobile } from '../../hooks/useIsMobile';
import { useBulkActionMobileGroups } from '../../hooks/useBulkActionMobileGroups';
function _MultiBulkActionToolbar(props) {
    const { primaryActionItems, secondaryActionItems, secondaryActionsPopoverMenuProps, containerId, containerProps, } = props;
    const toolbarCollectionState = useToolbarCollectionContext();
    const extensionMenuItems = useExtensionMenuItems({
        containerId,
        containerProps,
    });
    const isMobile = useIsMobile();
    const [state] = useState(() => new MultiBulkActionToolbarState({
        extensionMenuItems,
        collection: toolbarCollectionState.collection,
    }));
    useEffect(() => {
        state.setActions({
            primaryActionItems,
            secondaryActionItems,
        });
    }, [primaryActionItems, secondaryActionItems]);
    const { collection, hasToolbarTabs, featuredComponents, bulk } = toolbarCollectionState;
    const { maxSelection, total, selectedCountOrTotal, allSelected } = bulk;
    const { value: exportButton } = featuredComponents.exportButton;
    const TagsAssignButton = toolbarCollectionState.tagsCollectionState?.components.AssignButton;
    const { translate: t } = useWixPatternsContainer();
    const withBi = (item, ctaIndex) => {
        return {
            ...item,
            onClick: () => {
                toolbarCollectionState.toolbarBIReporter.ctaClicked({
                    itemId: bulk.selectedIds.join(','),
                    location: 'multiBulkActionToolbar',
                    ctaName: item.biName ?? '',
                    ctaIndex,
                    componentId: item.componentId,
                    appId: item.appId,
                    numCtas: state.primaryActionItems.length + state.secondaryActionItemsCount,
                });
                item?.onClick();
            },
        };
    };
    const mobileBulkActionGroups = useBulkActionMobileGroups({
        primaryActionItems: state.primaryActionItems,
        secondaryActionItems: state.secondaryActionItems,
        moreActionsLabel: t('cairo.moreActions'),
    });
    const mobileBulkActionGroupsWithBi = mobileBulkActionGroups?.map((group) => group.map((item, itemIndex) => withBi(item, itemIndex + 1)));
    const bulkActionButtonsDesktop = (React.createElement(React.Fragment, null,
        React.createElement(Box, { alignSelf: "stretch", marginLeft: "SP4", marginRight: "SP2" },
            React.createElement(Divider, { direction: "vertical" })),
        React.createElement(Box, { gap: "SP1", overflow: "hidden" },
            TagsAssignButton && (React.createElement(BulkActionContainer, null,
                React.createElement(TagsAssignButton, null))),
            exportButton && (React.createElement(BulkActionContainer, null, cloneElement(exportButton, {
                toolbarType: 'bulkActionToolbar',
            }))),
            state.primaryActionItems
                .filter((x) => !!x)
                .map((actionItem, index) => (React.createElement(BulkActionContainer, { key: index },
                React.createElement(ActionControl, { priority: "secondary", size: "small", actionItem: {
                        dataHook: 'bulk-action-button',
                        ...actionItem,
                        subItems: actionItem?.subItems?.map((subItemsGroup) => subItemsGroup?.map((subItem, subIndex) => ({
                            ...subItem,
                            onClick: () => {
                                toolbarCollectionState.toolbarBIReporter.ctaClicked({
                                    itemId: bulk.selectedIds.join(','),
                                    location: 'multiBulkActionToolbar',
                                    ctaName: subItem.biName ?? '',
                                    ctaIndex: subIndex + 1,
                                    moreActionsIndex: subIndex + 1,
                                    componentId: subItem.componentId,
                                    appId: subItem.appId,
                                    numCtas: state.primaryActionItems.length +
                                        state.secondaryActionItemsCount,
                                });
                                subItem.onClick?.();
                            },
                        }))),
                        onClick: () => {
                            toolbarCollectionState.toolbarBIReporter.ctaClicked({
                                itemId: bulk.selectedIds.join(','),
                                location: 'multiBulkActionToolbar',
                                ctaName: actionItem.biName ?? '',
                                ctaIndex: 1,
                                moreActionsIndex: 0,
                                componentId: actionItem.componentId,
                                appId: actionItem.appId,
                                numCtas: state.primaryActionItems.length +
                                    state.secondaryActionItemsCount,
                            });
                            actionItem.onClick?.();
                        },
                    } })))),
            state.secondaryActionItems.filter((secondaryActionItemsGroup) => secondaryActionItemsGroup.length > 0).length > 0 && (React.createElement(BulkActionContainer, null,
                React.createElement(ActionPopover, { priority: "secondary", size: "small", actionItem: {
                        dataHook: 'more-actions',
                        biName: 'more-actions',
                        subItems: (() => {
                            let index = 0;
                            return state.secondaryActionItems.map((subItemGroup) => subItemGroup.map((subItem) => {
                                const subItemIndex = index;
                                index++;
                                const _subItem = {
                                    ...subItem,
                                    onClick: () => {
                                        toolbarCollectionState.toolbarBIReporter.ctaClicked({
                                            itemId: bulk.selectedIds.join(','),
                                            location: 'multiBulkActionToolbar',
                                            ctaName: subItem.biName ?? '',
                                            ctaIndex: subItemIndex + 3,
                                            moreActionsIndex: subItemIndex + 1,
                                            componentId: subItem.componentId,
                                            appId: subItem.appId,
                                            numCtas: state.primaryActionItems.length +
                                                state.secondaryActionItemsCount,
                                        });
                                        subItem.onClick?.();
                                    },
                                };
                                return _subItem;
                            }));
                        })(),
                        popoverMenuProps: secondaryActionsPopoverMenuProps,
                        label: t('cairo.moreActions'),
                    } }))))));
    const bulkActionButtonsMobile = (React.createElement(ActionPopover, { priority: "secondary", size: "small", actionItem: {
            dataHook: 'all-actions-mobile',
            biName: 'more-actions',
            subItems: mobileBulkActionGroupsWithBi,
            popoverMenuProps: {
                fixed: false,
                minWidth: 'max-content',
                ...secondaryActionsPopoverMenuProps,
            },
            label: t('cairo.table.mobile.more.button'),
        } }));
    return (React.createElement(Box, { minHeight: "60px" },
        React.createElement(TableToolbar, { removeVerticalPadding: hasToolbarTabs, dataHook: "bulk-action-toolbar" },
            React.createElement(TableToolbar.ItemGroup, { position: "start", className: st(classes.root) },
                React.createElement(Box, { direction: "horizontal", className: st(classes.leftGroupWrapper) },
                    React.createElement(TableToolbar.Item, { className: st(classes.selectedCountItem) },
                        React.createElement(Text, { ellipsis: true, size: "small", weight: "thin", dataHook: "selected-count", className: st(classes.selectedCountText) }, maxSelection !== undefined
                            ? t('cairo.bulkActions.max.selection', {
                                max: maxSelection,
                                total: selectedCountOrTotal,
                            })
                            : collection.result.supportTotal &&
                                collection.result.totalStatus === 'success'
                                ? t('cairo.bulkSelectedWithTotal', {
                                    num: selectedCountOrTotal,
                                    total,
                                })
                                : allSelected
                                    ? ''
                                    : t('cairo.bulkSelected', {
                                        num: selectedCountOrTotal,
                                    }))),
                    collection.result.supportTotal && (React.createElement(TableToolbar.Item, null,
                        React.createElement(TextButton, { dataHook: "select-all", size: "small", onClick: () => bulk.toggleSelectAll({ location: 'TableToolbar CTA' }) }, bulk.hasClickableRows
                            ? t('cairo.selectAll')
                            : t('cairo.deselectAll')))),
                    !isMobile && bulkActionButtonsDesktop)),
            isMobile && (React.createElement(TableToolbar.ItemGroup, { position: "end" },
                React.createElement(TableToolbar.Item, null, bulkActionButtonsMobile))))));
}
export const MultiBulkActionToolbar = observer(_MultiBulkActionToolbar);
//# sourceMappingURL=MultiBulkActionToolbar.js.map