import { RefObject, useEffect, useRef } from 'react';
import {
  ReachBottomListener,
  ScrollableWindow,
} from '../reach-bottom-listener';
import { useWixPatternsContainer } from '@wix/bex-core/react';

export interface UseReachBottomParams {
  containerRef: RefObject<ScrollableWindow | null | undefined>;
  onReachBottom: () => unknown;
  // distance from the bottom to trigger the callback
  offsetPX?: number;
  // throttle scroll event
  delay?: number;
}

/**
 * Calls `onReachBottom` when the container is scrolled near its bottom.
 * For fetching more pages of a collection, use `useCollectionReachBottom`
 * instead — it also refills under-filled containers and reacts to
 * collection events.
 */
export function useReachBottom({
  containerRef,
  onReachBottom,
  offsetPX = 250,
  delay = 200,
}: UseReachBottomParams) {
  const { lodash } = useWixPatternsContainer();

  const onReachBottomRef = useRef(onReachBottom);
  onReachBottomRef.current = onReachBottom;

  useEffect(() => {
    const container = containerRef.current;
    if (container == null) {
      return;
    }

    const listener = new ReachBottomListener({
      onReachBottom: () => onReachBottomRef.current(),
      delay,
      offsetPX,
      lodash,
      container,
    });
    listener.subscribe();
    return () => listener.unsubscribe();
  }, []);
}