import { useEffect, useRef } from 'react';
/**
 * this hook takes an optional callback, wires it up to be called when a
 * "sentinel" element scrolls into view inside of a scroll container, and
 * returns `RefObject`s to use to attach to the appropriate DOM elements, e.g.
 *
 * ```jsx
 * export const InfiniteScroller: FC = () => {
 *   const myCallback = useCallback(() => {
 *     // do something when the sentinel scrolls into view inside the scroll
 *     // container
 *   }, []);
 *
 *   const [scrollContainerRef, sentinelRef] = useInfiniteScroll(myCallback);
 *
 *   return (
 *     <div className="scroll-container" ref={scrollContainerRef}>
 *       <div className="taller-than-scroll-container">
 *         // other stuff could go here ...
 *         <hr className="sentinel" ref={sentinelRef} />
 *         // ... or other stuff could go here
 *       </div>
 *     </div>
 *   );
 * }
 * ```
 *
 * the styling and exact structure is up to the implementor
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
 */
export const useInfiniteScroll = (callback) => {
    const scrollContainerRef = useRef(null);
    const sentinelRef = useRef(null);
    useEffect(() => {
        if (!(scrollContainerRef.current && sentinelRef.current)) {
            return;
        }
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (!(scrollContainerRef.current &&
                    scrollContainerRef.current.scrollHeight >
                        scrollContainerRef.current.clientHeight &&
                    entry.isIntersecting)) {
                    return;
                }
                callback === null || callback === void 0 ? void 0 : callback();
            });
        }, {
            root: scrollContainerRef.current,
        });
        observer.observe(sentinelRef.current);
        return () => {
            observer.disconnect();
        };
    }, [callback]);
    return [scrollContainerRef, sentinelRef];
};
//# sourceMappingURL=useInfiniteScroll.js.map