import React from 'react';
import { observer } from 'mobx-react-lite';
import { PlaceholderStatesBase } from '../PlaceholderStates/PlaceholderStatesBase';
import { ToolbarCollectionState } from '../../state';
import { ToolbarCollectionBaseProps } from '../ToolbarCollection';
import { FiltersMap } from '@wix/bex-core';

export interface GridPlaceholderStatesProps<T, F extends FiltersMap>
  extends ToolbarCollectionBaseProps<T, F> {
  state: ToolbarCollectionState<T, F>;
}

function _GridPlaceholderStates<T, F extends FiltersMap>(
  props: GridPlaceholderStatesProps<T, F>,
) {
  const { state, emptyState, noResultsState, errorState, children } = props;
  const { collection } = state;
  return (
    <PlaceholderStatesBase
      state={state.multi}
      emptyState={emptyState}
      noResultsState={
        typeof noResultsState === 'function'
          ? () => {
              const {
                result: { originQuery, hasAvailableItems },
              } = collection;
              return noResultsState({
                hasAvailableItems,
                query: originQuery,
              });
            }
          : noResultsState
      }
      errorState={errorState}
      loadingState={null}
    >
      {children}
    </PlaceholderStatesBase>
  );
}

export const GridPlaceholderStates = observer(_GridPlaceholderStates);