import { FiltersMap } from '@wix/bex-core';
import React from 'react';
import { CollectionProvider } from '@wix/bex-core/react';
import { observer } from 'mobx-react-lite';
import { BulkActionToolbarRenderProp } from './BulkActionToolbarRenderProp';
import { ToolbarCollectionState } from '../../state';

export interface SingleCollectionBulkActionToolbarProps<
  T,
  F extends FiltersMap,
> {
  state: ToolbarCollectionState<T, F>;
  bulkActionToolbar: BulkActionToolbarRenderProp<T, F>;
}

function _SingleCollectionBulkActionToolbar<T, F extends FiltersMap>(
  props: SingleCollectionBulkActionToolbarProps<T, F>,
) {
  const { state, bulkActionToolbar } = props;
  const { collection, bulk } = state;
  const {
    result: { total },
    bulkSelect,
  } = collection;

  const {
    selectedValues,
    uncheckedInCurrentCollection: uncheckedValues,
    allSelected,
  } = bulkSelect;

  const {
    modals: { openModal, openConfirmModal },
  } = bulk;

  return (
    <CollectionProvider value={collection}>
      {bulkActionToolbar({
        query: collection.result.originQuery,
        selectedValues,
        uncheckedValues,
        allSelected,
        total,
        openModal,
        clearSelection: collection.bulkSelect.resetToDefaults,
        openConfirmModal,
      })}
    </CollectionProvider>
  );
}

export const SingleCollectionBulkActionToolbar = observer(
  _SingleCollectionBulkActionToolbar,
);