import React from 'react';
import { debounce } from 'lodash';

export interface UseScrollResult {
  ref: any;
  onScroll: () => void;
}

const useScroll = (onEnd = () => {}) => {
  const end = debounce(onEnd, 100, { leading: true });
  const ref: React.MutableRefObject<any> = React.useRef();
  const onScroll = () => {
    if (ref.current.scrollHeight - ref.current.clientHeight <= ref.current.scrollTop) {
      if (typeof onEnd === 'function') {
        end();
      }
    }
  };

  return { ref, onScroll };
};

export default useScroll;