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

import { useCallback, useEffect, useMemo, useState } from "react";
import type { SightingWidgetType } from "../../types/types";
import { BLANK_IMG, capitalize, formatAge } 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";

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

export type SightingHistoryProps = {
  baseUrl: string;
  entries?: number; // number of rows to show
  pollMs?: number; // poll frequency
  autoSelectLatest?: boolean;
};

type SightingHistoryWidgetProps = React.HTMLAttributes<HTMLDivElement>;

export default function SightingHistoryWidget({
  className,
}: SightingHistoryWidgetProps) {
  useNow(1000);
  const { sightings, selectedRef, setSelectedRef } = useSightingFeedContext();

  const onRowClick = useCallback(
    (ref: number) => {
      setSelectedRef(ref);
    },
    [setSelectedRef]
  );

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

  return (
    <Card className={clsx("overflow-y-auto h-100", className)}>
      <CardHeader title="Front Camera Sightings" />
      <div className="flex flex-col gap-3 ">
        {/* Rows */}
        <div className="flex flex-col">
          {rows?.map((obj, idx) => {
            const isSelected = obj?.ref === selectedRef;
            const motionAway = (obj?.motion ?? "").toUpperCase() === "AWAY";
            const primaryIsColour = obj?.srcCam === 1;
            const secondaryMissing = (obj?.vrmSecondary ?? "") === "";

            return (
              <div
                key={idx}
                className={`border border-neutral-700 rounded-md mb-2 p-2 cursor-pointer ${
                  isSelected ? "ring-2 ring-blue-400" : ""
                }`}
                onClick={() => onRowClick(obj.ref)}
              >
                {/* Info bar */}
                <div className="flex items-center gap-3 text-xs bg-neutral-900 px-2 py-1 rounded">
                  <div className="min-w-14">
                    CH: {obj ? obj.charHeight : "—"}
                  </div>
                  <div className="min-w-14">
                    Seen: {obj ? obj.seenCount : "—"}
                  </div>
                  <div className="min-w-20">
                    {obj ? capitalize(obj.motion) : "—"}
                  </div>
                  <div className="min-w-14 opacity-80">
                    {obj ? formatAge(obj.timeStampMillis) : "—"}
                  </div>
                </div>

                {/* Patch row */}
                <div className="flex items-center gap-3 mt-2">
                  <div
                    className={`border p-1 ${
                      primaryIsColour ? "" : "ring-2 ring-lime-400"
                    } ${!obj ? "opacity-30" : ""}`}
                  >
                    <img
                      src={obj?.plateUrlInfrared || BLANK_IMG}
                      height={48}
                      alt="infrared patch"
                      className={!primaryIsColour ? "" : "opacity-60"}
                    />
                  </div>
                  <div
                    className={`border p-1 ${
                      primaryIsColour ? "ring-2 ring-lime-400" : ""
                    } ${
                      secondaryMissing && primaryIsColour
                        ? "opacity-30 grayscale"
                        : ""
                    }`}
                  >
                    <img
                      src={obj?.plateUrlColour || BLANK_IMG}
                      height={48}
                      alt="colour patch"
                      className={primaryIsColour ? "" : "opacity-60"}
                    />
                  </div>
                  <NumberPlate motion={motionAway} vrm={obj?.vrm} />
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </Card>
  );
}