import React from 'react';
import { observer } from 'mobx-react-lite';
import {
  PlaceholderStatesBase,
  PlaceholderStatesBaseProps,
} from '../PlaceholderStates/PlaceholderStatesBase';
import { GridFoldersState } from '../../state';
import { FiltersMap } from '@wix/bex-core';

export interface GridFoldersPlaceholderStatesProps<
  T1,
  F1 extends FiltersMap,
  T2,
  F2 extends FiltersMap,
> extends Omit<PlaceholderStatesBaseProps, 'state'> {
  state: GridFoldersState<T1, F1, T2, F2>;
}

function _GridFoldersPlaceholderStates<
  T1,
  F1 extends FiltersMap,
  T2,
  F2 extends FiltersMap,
>(props: GridFoldersPlaceholderStatesProps<T1, F1, T2, F2>) {
  const { state, emptyState, noResultsState, errorState, children } = props;
  return (
    <PlaceholderStatesBase
      state={state}
      emptyState={emptyState}
      noResultsState={noResultsState}
      errorState={errorState}
      loadingState={null}
    >
      {children}
    </PlaceholderStatesBase>
  );
}

export const GridFoldersPlaceholderStates = observer(
  _GridFoldersPlaceholderStates,
);