import React, { MutableRefObject } from 'react';
import { Box, Loader, LoaderProps } from '@wix/design-system';
import { observer } from 'mobx-react-lite';
import { CollectionStateProps } from '../collectionStateProps';
import { FiltersMap } from '@wix/bex-core';
import { InfiniteScrollLoaderBase } from './InfiniteScrollLoaderBase';
import { usePatternsTheme } from '../../themes/PatternsThemeProvider';

export interface InfiniteScrollLoaderProps<T, F extends FiltersMap>
  extends CollectionStateProps<T, F>,
    Partial<LoaderProps> {
  targetRef: MutableRefObject<HTMLElement | null | undefined>;
}

export const InfiniteScrollLoader = observer(function Table<
  T,
  F extends FiltersMap,
>({ state, targetRef, ...rest }: InfiniteScrollLoaderProps<T, F>) {
  const { loader } = usePatternsTheme();
  return (
    <InfiniteScrollLoaderBase state={state} targetRef={targetRef}>
      <Box align="center" padding="large">
        <Loader size={loader?.size} {...rest} />
      </Box>
    </InfiniteScrollLoaderBase>
  );
});