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

export interface PageInfiniteScrollLoaderProps<T, F extends FiltersMap> {
  dataHook?: string;
  state: CollectionState<T, F>;
  scrollMoreAlways?: boolean;
}

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

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

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

export const PageInfiniteScrollLoader = observer(_PageInfiniteScrollLoader);