import { useEffect, useRef, useState } from "react";
import { useVideoFeed } from "./useVideoFeed";
import type { SightingType } from "../../../utils/types";

export const useSightingList = () => {
  const [sightingList, setSightingList] = useState<SightingType[]>([]);
  const { videoFeedQuery } = useVideoFeed();
  const latestSighting = videoFeedQuery?.data;
  const lastProcessedRef = useRef<number>(-1);
  const isLoading = videoFeedQuery?.isPending;

  useEffect(() => {
    if (!latestSighting || latestSighting.ref === undefined || latestSighting.ref === -1) return;

    if (latestSighting.ref !== lastProcessedRef.current) {
      lastProcessedRef.current = latestSighting.ref;

      // eslint-disable-next-line react-hooks/set-state-in-effect
      setSightingList((prevList) => {
        if (prevList[0]?.ref === latestSighting.ref) return prevList;
        const dedupPrev = prevList.filter((s) => s.ref !== latestSighting.ref);
        return [latestSighting, ...dedupPrev].slice(0, 10);
      });
    }
  }, [latestSighting, latestSighting?.ref]);
  return { sightingList, isLoading };
};