import {
  Box,
  Divider,
  PopoverMenuProps,
  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, ActionSubitem } from '../ActionControl';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { MultiBulkActionToolbarState } from './MultiBulkActionToolbarState';
import { useExtensionMenuItems } from '../../hooks/useExtensionMenuItems';
import { BulkActionContainer } from './BulkActionContainer';

export interface MultiBulkActionToolbarProps {
  /**
   * List of primary actions. Primary actions are displayed as individual buttons.
   * @overrideType [ActionSubitem[]](./?path=/story/common-types--actionsubitem)
   * @external
   */
  primaryActionItems?: ActionSubitem[];

  /**
   * List of secondary actions. Secondary actions are displayed when clicking the More Actions menu.
   * Secondary actions can be grouped by using an array of arrays, and a divider will be added between each group.
   * @external
   * @overrideType [ActionSubitem[]](./?path=/story/common-types--actionsubitem) | [ActionSubitem[][]](./?path=/story/common-types--actionsubitem)
   */
  secondaryActionItems?: ActionSubitem[] | ActionSubitem[][];

  /**
   * [PopoverMenu](https://www.docs.wixdesignsystem.com/?path=/story/components-overlays--popovermenu) props to pass to the 'More Action' popover menu.
   * @external
   */
  secondaryActionsPopoverMenuProps?: Partial<PopoverMenuProps>;

  /**
   * This ID is used to specify the target container for [dashboard menu plugin](./?path=/story/features-enrich-slots-and-plugins--slots-and-plugins) items.
   */
  containerId?: string;

  /**
   * This prop is used to pass additional properties that can be used on the onClick of the container's extensions menu items.
   */
  containerProps?: Record<string, any>;
}

function _MultiBulkActionToolbar(props: MultiBulkActionToolbarProps) {
  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 (
    <Box minHeight="60px">
      <TableToolbar
        removeVerticalPadding={hasToolbarTabs}
        dataHook="bulk-action-toolbar"
      >
        <TableToolbar.ItemGroup position="start" className={st(classes.root)}>
          <TableToolbar.Item>
            <TableToolbar.SelectedCount dataHook="selected-count">
              <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,
                    })}
              </span>
            </TableToolbar.SelectedCount>
          </TableToolbar.Item>

          {collection.result.supportTotal && (
            <TableToolbar.Item>
              <TextButton
                dataHook="select-all"
                size="small"
                onClick={() =>
                  bulk.toggleSelectAll({ location: 'TableToolbar CTA' })
                }
              >
                {bulk.hasClickableRows
                  ? t('cairo.selectAll')
                  : t('cairo.deselectAll')}
              </TextButton>
            </TableToolbar.Item>
          )}

          <Box alignSelf="stretch" marginLeft="SP4" marginRight="SP2">
            <Divider direction="vertical" />
          </Box>

          <Box gap="SP1" overflow="hidden">
            {TagsAssignButton && (
              <BulkActionContainer>
                <TagsAssignButton />
              </BulkActionContainer>
            )}
            {exportButton && (
              <BulkActionContainer>
                {cloneElement(exportButton, {
                  toolbarType: 'bulkActionToolbar',
                })}
              </BulkActionContainer>
            )}
            {state.primaryActionItems
              .filter((x) => !!x)
              .map((actionItem, index) => (
                <BulkActionContainer key={index}>
                  <ActionControl
                    priority="secondary"
                    size="small"
                    actionItem={{
                      dataHook: 'bulk-action-button',
                      ...actionItem,
                      subItems: (
                        actionItem?.subItems as ActionSubitem[][]
                      )?.map((subItemsGroup) =>
                        subItemsGroup?.map((subItem, index) => ({
                          ...subItem,
                          onClick: () => {
                            toolbarCollectionState.toolbarBIReporter.ctaClicked(
                              {
                                itemId: bulk.selectedIds.join(','),
                                location: 'multiBulkActionToolbar',
                                ctaName: subItem.biName ?? '',
                                ctaIndex: index + 1, // Missing BI requirements https://jira.wixpress.com/browse/CAIRO-600?focusedCommentId=9989131
                                moreActionsIndex: index + 1,
                                componentId: (subItem as any).componentId,
                                appId: (subItem as any).appId,
                                numCtas:
                                  state.primaryActionItems.length +
                                  state.secondaryActionItemsCount,
                              },
                            );
                            subItem.onClick?.();
                          },
                        })),
                      ),
                      onClick: () => {
                        toolbarCollectionState.toolbarBIReporter.ctaClicked({
                          itemId: bulk.selectedIds.join(','),
                          location: 'multiBulkActionToolbar',
                          ctaName: actionItem.biName ?? '',
                          ctaIndex: 1, // Missing BI requirements https://jira.wixpress.com/browse/CAIRO-600?focusedCommentId=9989131
                          moreActionsIndex: 0,
                          componentId: (actionItem as any).componentId,
                          appId: (actionItem as any).appId,
                          numCtas:
                            state.primaryActionItems.length +
                            state.secondaryActionItemsCount,
                        });
                        actionItem.onClick?.();
                      },
                    }}
                  />
                </BulkActionContainer>
              ))}

            {state.secondaryActionItems.filter(
              (secondaryActionItemsGroup) =>
                secondaryActionItemsGroup.length > 0,
            ).length > 0 && (
              <BulkActionContainer>
                <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 as any).componentId,
                                  appId: (subItem as any).appId,
                                  numCtas:
                                    state.primaryActionItems.length +
                                    state.secondaryActionItemsCount,
                                },
                              );
                              subItem.onClick?.();
                            },
                          };
                          return _subItem;
                        }),
                      );
                    })(),

                    popoverMenuProps: secondaryActionsPopoverMenuProps,
                    label: t('cairo.moreActions'),
                  }}
                />
              </BulkActionContainer>
            )}
          </Box>
        </TableToolbar.ItemGroup>
      </TableToolbar>
    </Box>
  );
}

export const MultiBulkActionToolbar = observer(_MultiBulkActionToolbar);
