Mav-Mobile-UI/src/components/SightingsWidget/SightingWidget.tsx

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import type { HitKind, QueuedHit, ReducedSightingType, SightingType } from "../../types/types";
import { BLANK_IMG } from "../../utils/utils";
import NumberPlate from "../PlateStack/NumberPlate";
import Card from "../UI/Card";
import CardHeader from "../UI/CardHeader";
import clsx from "clsx";
import { useSightingFeedContext } from "../../context/SightingFeedContext";
import SightingModal from "../SightingModal/SightingModal";
import { useAlertHitContext } from "../../context/AlertHitContext";
import HotListImg from "/Hotlist_Hit.svg";
import NPED_CAT_A from "/NPED_Cat_A.svg";
import NPED_CAT_B from "/NPED_Cat_B.svg";
import NPED_CAT_C from "/NPED_Cat_C.svg";
import NPED_CAT_D from "/NPED_Cat_D.svg";
import { useIntegrationsContext } from "../../context/IntegrationsContext";
import Loading from "../UI/Loading";
import { checkIsHotListHit, getNPEDCategory } from "../../utils/utils";

function useNow(tickMs = 1000) {
  const [, setNow] = useState(() => Date.now());
  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), tickMs);
    return () => clearInterval(id);
  }, [tickMs]);
  return null;
}

type SightingHistoryProps = {
  baseUrl?: string;
  entries?: number;
  pollMs?: number;
  autoSelectLatest?: boolean;
  title: string;
  className?: string;
};

export default function SightingHistoryWidget({ className, title }: SightingHistoryProps) {
  const [modalQueue, setModalQueue] = useState<QueuedHit[]>([]);

  useNow(1000);

  const {
    sightings,
    setSelectedSighting,
    setSightingModalOpen,
    isSightingModalOpen,
    selectedSighting,
    mostRecent,
    isLoading,
  } = useSightingFeedContext();

  const { dispatch, state: alertState } = useAlertHitContext();
  const { state: integrationState, dispatch: integrationDispatch } = useIntegrationsContext();
  const sessionStarted = integrationState.sessionStarted;
  const sessionPaused = integrationState.sessionPaused;
  const processedRefs = useRef<Set<number | string>>(new Set());

  const hasAutoOpenedRef = useRef(false);
  const npedRef = useRef(false);

  const isCatAEnabled = integrationState?.iscatEnabled?.catA;
  const isCatBEnabled = integrationState?.iscatEnabled?.catB;
  const isCatCEnabled = integrationState?.iscatEnabled?.catC;
  const isCatDEnabled = integrationState?.iscatEnabled?.catD;

  const enqueue = useCallback(
    (sighting: SightingType, kind: HitKind) => {
      if (!sighting) return;

      const id = sighting.vrm ?? sighting.ref;
      if (processedRefs.current.has(id)) return;

      const inList = alertState?.alertList?.find((sighting) => sighting.vrm === id);
      if (inList) {
        return;
      }

      processedRefs.current.add(id);

      setModalQueue((q) => [...q, { id, sighting, kind }]);
    },
    [alertState?.alertList]
  );

  const reduceObject = (obj: SightingType): ReducedSightingType => {
    return {
      vrm: obj.vrm,
      metadata: obj?.metadata,
    };
  };

  useEffect(() => {
    if (sessionStarted) {
      if (!mostRecent) return;
      if (sessionPaused) return;
      const reducedMostRecent = reduceObject(mostRecent);
      integrationDispatch({ type: "ADD", payload: reducedMostRecent });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [mostRecent, sessionStarted]);

  const onRowClick = useCallback(
    (sighting: SightingType) => {
      if (!sighting) return;
      setSightingModalOpen(true);
      setSelectedSighting(sighting);
    },
    [setSelectedSighting, setSightingModalOpen]
  );

  const rows = useMemo(() => sightings?.filter(Boolean) as SightingType[], [sightings]);

  useEffect(() => {
    if (!rows?.length) return;

    for (const sighting of rows) {
      const id = sighting.vrm;

      if (processedRefs.current.has(id)) continue;
      const isHotlistHit = checkIsHotListHit(sighting);
      const npedcategory = sighting?.metadata?.npedJSON?.["NPED CATEGORY"];
      const isNPED =
        (npedcategory === "A" && isCatAEnabled) ||
        (npedcategory === "B" && isCatBEnabled) ||
        (npedcategory === "C" && isCatCEnabled) ||
        (npedcategory === "D" && isCatDEnabled);

      if (isNPED || isHotlistHit) {
        enqueue(sighting, isNPED ? "NPED" : "HOTLIST"); // enqueue ONLY
      }
    }
  }, [rows, enqueue, isCatAEnabled, isCatBEnabled, isCatCEnabled, isCatDEnabled]);

  useEffect(() => {
    if (hasAutoOpenedRef.current || npedRef.current) return;
    const firstNPED = rows.find((r) => {
      const cat = getNPEDCategory(r);
      const isNPEDHitA = cat === "A" && isCatAEnabled;
      const isNPEDHitB = cat === "B" && isCatBEnabled;
      const isNPEDHitC = cat === "C" && isCatCEnabled;
      const isNPEDHitD = cat === "D" && isCatDEnabled;
      return isNPEDHitA || isNPEDHitB || isNPEDHitC || isNPEDHitD;
    });
    const firstHot = rows?.find((r) => {
      const isHotListHit = checkIsHotListHit(r);

      return isHotListHit;
    });

    if (firstNPED) {
      enqueue(firstNPED, "NPED");
      npedRef.current = true;
    }

    if (firstHot) {
      enqueue(firstHot, "HOTLIST");

      hasAutoOpenedRef.current = true;
    }
  }, [
    enqueue,
    rows,
    setSelectedSighting,
    setSightingModalOpen,
    isCatAEnabled,
    isCatBEnabled,
    isCatCEnabled,
    isCatDEnabled,
  ]);

  useEffect(() => {
    if (!isSightingModalOpen && modalQueue.length > 0) {
      const next = modalQueue[0];
      setSelectedSighting(next.sighting);

      setSightingModalOpen(true);
    }
  }, [isSightingModalOpen, setSelectedSighting, setSightingModalOpen, modalQueue]);

  useEffect(() => {
    rows?.forEach((obj) => {
      const cat = getNPEDCategory(obj);
      const isNPEDHitA = cat === "A";
      const isNPEDHitB = cat === "B";
      const isNPEDHitC = cat === "C";
      const isNPEDHitD = cat === "D";
      if (isNPEDHitA || isNPEDHitB || isNPEDHitC || isNPEDHitD) {
        dispatch({
          type: "ADD",
          payload: obj,
        });
      }
    });
  }, [dispatch, rows]);

  const handleClose = () => {
    setSightingModalOpen(false);
    setModalQueue((q) => q.slice(1));
  };

  return (
    <>
      <Card className={clsx("overflow-y-auto min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4", className)}>
        <CardHeader title={title} />
        <div className="flex flex-col gap-3 ">
          {isLoading && (
            <div className="my-50 h-[50%]">
              <Loading message="Loading Sightings" />
            </div>
          )}
          {/* Rows */}
          <div className="flex flex-col">
            {rows?.map((obj) => {
              const cat = getNPEDCategory(obj);
              const isNPEDHitA = cat === "A";
              const isNPEDHitB = cat === "B";
              const isNPEDHitC = cat === "C";
              const isNPEDHitD = cat === "D";
              const motionAway = (obj?.motion ?? "").toUpperCase() === "AWAY";
              const isHotListHit = checkIsHotListHit(obj);
              return (
                <div
                  key={obj.ref}
                  className={`border border-gray-700 rounded-md mb-2 p-2 cursor-pointer `}
                  onClick={() => onRowClick(obj)}
                >
                  <div className={`flex items-center gap-3 mt-2 justify-between `}>
                    <div className={`hidden md:block border p-1 `}>
                      <img
                        src={obj?.plateUrlColour || BLANK_IMG}
                        className="hidden md:block w-[200px] h-[48px]"
                        style={{ objectFit: "cover" }}
                        alt="colour patch"
                      />
                    </div>
                    {isHotListHit && (
                      <img src={HotListImg} alt="hotlistHit" className="h-20 object-contain rounded-md" />
                    )}
                    {isNPEDHitA && <img src={NPED_CAT_A} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
                    {isNPEDHitB && <img src={NPED_CAT_B} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
                    {isNPEDHitC && <img src={NPED_CAT_C} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
                    {isNPEDHitD && <img src={NPED_CAT_D} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
                    <NumberPlate motion={motionAway} vrm={obj?.vrm} />
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </Card>
      <SightingModal isSightingModalOpen={isSightingModalOpen} handleClose={handleClose} sighting={selectedSighting} />
    </>
  );
}