Mav-Mobile-UI/src/components/HistoryList/AlertItem.tsx

import type { SightingType } from "../../types/types";
import NumberPlate from "../PlateStack/NumberPlate";
import SightingModal from "../SightingModal/SightingModal";
import InfoBar from "../SightingsWidget/InfoBar";
import { useState } from "react";
import HotListImg from "/Hotlist_Hit.svg";
import { useAlertHitContext } from "../../context/AlertHitContext";
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";

type AlertItemProps = {
  item: SightingType;
};

const AlertItem = ({ item }: AlertItemProps) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const { dispatch } = useAlertHitContext();

  // const {d} = useCameraBlackboard();
  const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
  // [34].metadata.hotlistMatches["MAV_Hotlist.csv"]
  //check if true is in any hotlist property
  const isHotListHit = item?.metadata?.hotlistMatches?.Hotlist0 === true;
  const isNPEDHitA = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
  const isNPEDHitB = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
  const isNPEDHitC = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";

  const handleClick = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  const handleDelete = () => {
    dispatch({ type: "REMOVE", payload: item });
  };
  return (
    <div className="flex flex-col w-full">
      <div className="border border-gray-400 rounded-lg items-center py-1">
        <InfoBar obj={item} />
        <div
          className=" flex flex-row p-4  w-full mx-auto justify-between"
          onClick={handleClick}
        >
          {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"
            />
          )}

          <div className="flex flex-col">
            <small>MAKE: {item.make}</small>
            <small>MODEL: {item.model}</small>
            <small>COLOUR: {item.color}</small>
          </div>

          <NumberPlate vrm={item.vrm} motion={motionAway} />
        </div>
        <SightingModal
          isSightingModalOpen={isModalOpen}
          handleClose={closeModal}
          sighting={item}
          onDelete={handleDelete}
        />
      </div>
    </div>
  );
};

export default AlertItem;