import {
  ComputedQuery,
  FiltersMap,
  OptionalFiltersMap,
  PickerState,
} from '@wix/bex-core';
import React, { ReactElement } from 'react';
import { Box } from '@wix/design-system';
import { PickerEmptyState } from './PickerEmptyState';
import { observer } from 'mobx-react-lite';

interface PickerEmptyStateContainerProps<
  T,
  F extends FiltersMap = OptionalFiltersMap,
> {
  hasFilterDropdown?: boolean;
  state: PickerState<T, F>;
  renderEmptyState?: (params: {
    hasAvailableItems: boolean;
    query: ComputedQuery<F>;
  }) => ReactElement | null | undefined;
}

function _PickerEmptyStateContainer<T, F extends FiltersMap>({
  state,
  renderEmptyState,
  hasFilterDropdown,
}: PickerEmptyStateContainerProps<T, F>) {
  const { minContentHeight, collection } = state;

  const {
    result: { originQuery, hasAvailableItems },
  } = collection;

  return (
    <Box direction="vertical" overflow="auto">
      <Box
        align="center"
        verticalAlign="middle"
        paddingTop="SP2"
        paddingBottom="SP9"
        height="100%"
        minHeight={minContentHeight}
      >
        {renderEmptyState?.({
          hasAvailableItems,
          query: originQuery,
        }) ?? (
          <PickerEmptyState
            state={state}
            hasFilterDropdown={hasFilterDropdown}
          />
        )}
      </Box>
    </Box>
  );
}

export const PickerEmptyStateContainer = observer(_PickerEmptyStateContainer);