import React from 'react';
import { observer } from 'mobx-react-lite';
import { FiltersMap } from '@wix/bex-core';
import { GridBaseState } from '../../state';
import { InfiniteScrollLoaderBaseProps } from './InfiniteScrollLoaderBaseProps';
import { InfiniteScrollLoaderBase } from './InfiniteScrollLoaderBase';
import { SkeletonGrid } from '../SkeletonGrid';
import { Box } from '@wix/design-system';

export interface SkeletonInfiniteScrollLoaderProps<T, F extends FiltersMap>
  extends InfiniteScrollLoaderBaseProps {
  state: GridBaseState<T, F>;
}

function _SkeletonInfiniteScrollLoader<T, F extends FiltersMap>({
  state,
  targetRef,
  dataHook,
}: SkeletonInfiniteScrollLoaderProps<T, F>) {
  const { contentPaddingPx } = state.toolbar;

  return (
    <InfiniteScrollLoaderBase state={state.collection} targetRef={targetRef}>
      <Box dataHook={dataHook} paddingBottom={contentPaddingPx}>
        <SkeletonGrid state={state} />
      </Box>
    </InfiniteScrollLoaderBase>
  );
}

export const SkeletonInfiniteScrollLoader = observer(
  _SkeletonInfiniteScrollLoader,
);