import { useCollectionReachBottom } from './useCollectionReachBottom';
import React from 'react';
import {
  SkeletonInfiniteScrollLoader,
  SkeletonInfiniteScrollLoaderProps,
} from './InfiniteScrollLoader/SkeletonInfiniteScrollLoader';
import { FiltersMap } from '@wix/bex-core';
import { useScrollableContentContext } from '../providers';
import { observer } from 'mobx-react-lite';
import { GridBaseState } from '../state';

export interface PageGridInfiniteScrollLoaderProps<T, F extends FiltersMap>
  extends Partial<SkeletonInfiniteScrollLoaderProps<T, F>> {
  dataHook?: string;
  state: GridBaseState<T, F>;
  scrollMoreAlways?: boolean;
}

function _PageSkeletonInfiniteScrollLoader<T, F extends FiltersMap>(
  props: PageGridInfiniteScrollLoaderProps<T, F>,
) {
  const { scrollMoreAlways, ...rest } = props;
  const { scrollableContentRef } = useScrollableContentContext();

  const { targetRef } = useCollectionReachBottom({
    collection: props.state.collection,
    containerRef: scrollableContentRef,
    scrollMoreAlways,
  });

  return <SkeletonInfiniteScrollLoader targetRef={targetRef} {...rest} />;
}

export const PageGridInfiniteScrollLoader = observer(
  _PageSkeletonInfiniteScrollLoader,
);