Mav-Mobile-UI/src/components/SightingOverview/SightingOverview.tsx

import { useCallback, useRef, useState } from "react";
import { BLANK_IMG } from "../../utils/utils";
import SightingWidgetDetails from "../SightingsWidget/SightingWidgetDetails";
import { useOverviewOverlay } from "../../hooks/useOverviewOverlay";
import { useSightingFeedContext } from "../../context/SightingFeedContext";
import { useHiDPICanvas } from "../../hooks/useHiDPICanvas";
import NavigationArrow from "../UI/NavigationArrow";

const SightingOverview = () => {
  const [overlayMode, setOverlayMode] = useState<0 | 1 | 2>(0);

  const imgRef = useRef<HTMLImageElement | null>(null);
  const canvasRef = useRef<HTMLCanvasElement | null>(null);

  const onOverviewClick = useCallback(() => {
    setOverlayMode((m) => ((m + 1) % 3) as 0 | 1 | 2);
  }, []);

  const { side, mostRecent, isError, isLoading } = useSightingFeedContext();

  useOverviewOverlay(mostRecent, overlayMode, imgRef, canvasRef);

  const { sync } = useHiDPICanvas(imgRef, canvasRef);

  if (isLoading) return <p>Loading</p>;

  if (isError) return <p>An error occurred, Cannot display footage</p>;

  return (
    <div className="flex flex-col">
      <div className="grid gap-3">
        <NavigationArrow side={side} />
        <div className="inline-block w-full mx-auto">
          <div className="relative aspect-[1280/800]">
            <img
              ref={imgRef}
              onLoad={() => {
                sync();
                setOverlayMode((m) => m);
              }}
              src={mostRecent?.overviewUrl || BLANK_IMG}
              alt="overview"
              className="absolute inset-0 w-full h-full object-contain cursor-pointer z-10 "
              onClick={onOverviewClick}
              style={{
                display: mostRecent?.overviewUrl ? "block" : "none",
              }}
            />
            <canvas
              ref={canvasRef}
              className="absolute inset-0 w-full h-full object-contain z-20 pointer-events-none "
            />
          </div>
        </div>
        <div className="text-xs opacity-80">
          Overlay:{" "}
          {overlayMode === 0
            ? "Off"
            : overlayMode === 1
            ? "Plate box"
            : "Track + box"}{" "}
          (click image to toggle)
        </div>
      </div>
      <SightingWidgetDetails effectiveSelected={mostRecent} />
    </div>
  );
};

export default SightingOverview;