import React, { useEffect, useRef, useState } from "react";
import useOnScreen from "../hooks/useOnScreen";
import useSearch from "../hooks/useSearch";
import { secondsInMs } from "../lib/time";
import CommentList from "./CommentList";

const CommentScroller = ({ storyId } = {}) => {
  const loadMoreElement = useRef(null);
  const isOnScreen = useOnScreen(loadMoreElement, "0px");
  const [lastRefresh, setLastRefresh] = useState(0);
  const { comments, loadMore } = useSearch({ storyId });

  useEffect(() => {
    const timeSinceLastRefresh = new Date() - lastRefresh;
    if (isOnScreen && timeSinceLastRefresh > secondsInMs(5)) {
      loadMore();
      setLastRefresh(new Date());
    }
  }, [isOnScreen, loadMore, lastRefresh]);

  return (
    <div>
      <CommentList comments={comments} />
      <span ref={loadMoreElement} />
    </div>
  );
};

export default CommentScroller;