import { Box, TableToolbar } from '@wix/design-system';
import React, { cloneElement, ReactNode } from 'react';
import { observer } from 'mobx-react-lite';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';

export interface BulkActionToolbarProps {
  actionButton?: ReactNode;
}

export function _BulkActionToolbar(props: BulkActionToolbarProps) {
  const { actionButton } = props;

  const toolbarCollectionState = useToolbarCollectionContext();

  const { collection, hasToolbarTabs, featuredComponents } =
    toolbarCollectionState;

  const { value: exportButton } = featuredComponents.exportButton;
  const TagsAssignButton =
    toolbarCollectionState.tagsCollectionState?.components.AssignButton;

  const {
    bulkSelect: { selectedCountOrTotal: selectedCount },
    translate: t,
  } = collection;

  return (
    <Box minHeight="60px">
      <TableToolbar
        removeVerticalPadding={hasToolbarTabs}
        dataHook="bulk-action-toolbar"
      >
        <TableToolbar.ItemGroup position="start">
          <TableToolbar.Item>
            <TableToolbar.SelectedCount dataHook="selected-count">
              {t('cairo.bulkSelected', {
                num: selectedCount,
              })}
            </TableToolbar.SelectedCount>
          </TableToolbar.Item>
          {TagsAssignButton && (
            <TableToolbar.Item>
              <TagsAssignButton />
            </TableToolbar.Item>
          )}
          {exportButton && (
            <TableToolbar.Item>
              {cloneElement(exportButton, {
                toolbarType: 'default',
              })}
            </TableToolbar.Item>
          )}
        </TableToolbar.ItemGroup>
        {actionButton && (
          <TableToolbar.ItemGroup position="end">
            <TableToolbar.Item layout="button">
              {actionButton}
            </TableToolbar.Item>
          </TableToolbar.ItemGroup>
        )}
      </TableToolbar>
    </Box>
  );
}

export const BulkActionToolbar = observer(_BulkActionToolbar);