import { Box, Divider, TableToolbar, 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';
function _MultiBulkActionToolbar(props) {
    const { primaryActionItems, secondaryActionItems, secondaryActionsPopoverMenuProps, containerId, containerProps, } = props;
    const toolbarCollectionState = useToolbarCollectionContext();
    const extensionMenuItems = useExtensionMenuItems({
        containerId,
        containerProps,
    });
    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();
    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(TableToolbar.Item, null,
                    React.createElement(TableToolbar.SelectedCount, { dataHook: "selected-count" },
                        React.createElement("span", { style: { whiteSpace: 'nowrap' } }, 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')))),
                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, index) => ({
                                    ...subItem,
                                    onClick: () => {
                                        toolbarCollectionState.toolbarBIReporter.ctaClicked({
                                            itemId: bulk.selectedIds.join(','),
                                            location: 'multiBulkActionToolbar',
                                            ctaName: subItem.biName ?? '',
                                            ctaIndex: index + 1,
                                            moreActionsIndex: index + 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'),
                            } }))))))));
}
export const MultiBulkActionToolbar = observer(_MultiBulkActionToolbar);
//# sourceMappingURL=MultiBulkActionToolbar.js.map