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

import { faCheck, faTrash, faX } from "@fortawesome/free-solid-svg-icons";
import type { SightingType } from "../../types/types";
import NumberPlate from "../PlateStack/NumberPlate";
import ModalComponent from "../UI/ModalComponent";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useAlertHitContext } from "../../context/AlertHitContext";
import { toast, Toaster } from "sonner";
import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
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 { checkIsHotListHit, getHotlistName, getNPEDCategory } from "../../utils/utils";

type SightingModalProps = {
  isSightingModalOpen: boolean;
  handleClose: () => void;
  sighting: SightingType | null;
  onDelete?: (deletedItem: SightingType | null) => void;
};

const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }: SightingModalProps) => {
  const { dispatch } = useAlertHitContext();
  const { query, mutation } = useCameraBlackboard();

  const hotlistNames = getHotlistName(sighting?.metadata?.hotlistMatches);
  const handleAcknowledgeButton = () => {
    try {
      if (!sighting) {
        toast.error("Cannot add sighting to alert list");
        handleClose();
        return;
      }
      if (!query.data.alertHistory) {
        mutation.mutate({
          operation: "INSERT",
          path: "alertHistory",
          value: [sighting],
        });
      } else {
        mutation.mutate({
          operation: "APPEND",
          path: "alertHistory",
          value: sighting,
        });
        toast.success("Sighting Successfully added to alert list");
      }

      dispatch({ type: "ADD", payload: sighting });
      handleClose();
    } catch (error) {
      console.error(error);
      toast.error("Failed to add sighting to alert list");
      handleClose();
    }
  };

  const handleDeleteClick = (deletedItem: SightingType | null) => {
    if (!onDelete) return;
    onDelete(deletedItem);
    handleClose();
    toast.success("Sighting removed from alert list");
  };

  const motionAway = (sighting?.motion ?? "").toUpperCase() === "AWAY";
  const isHotListHit = checkIsHotListHit(sighting);
  const cat = getNPEDCategory(sighting);
  const isNPEDHitA = cat === "A";
  const isNPEDHitB = cat === "B";
  const isNPEDHitC = cat === "C";

  return (
    <>
      <ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}>
        <div className="max-w-screen-lg mx-auto py-4 px-2">
          <div className="border-b border-gray-600 mb-4">
            <h2 className="text-lg md:text-xl font-semibold">Sighting Details</h2>
          </div>
          <div className="mt-3 flex-col-reverse gap-3 md:flex-row md:justify-center flex md:hidden">
            {onDelete ? (
              <button
                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
                onClick={() => handleDeleteClick(sighting)}
              >
                <FontAwesomeIcon icon={faTrash} />
                Delete
              </button>
            ) : (
              <button
                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
                onClick={handleClose}
              >
                <FontAwesomeIcon icon={faX} />
                Deny
              </button>
            )}
            {onDelete ? (
              <button
                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-blue-600 text-white hover:bg-blue-700 w-full md:w-full"
                onClick={handleClose}
              >
                <FontAwesomeIcon icon={faX} />
                Close
              </button>
            ) : (
              <button
                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-green-600 text-white hover:bg-green-700 w-full md:w-full"
                onClick={handleAcknowledgeButton}
              >
                <FontAwesomeIcon icon={faCheck} />
                Acknowledge
              </button>
            )}
          </div>
          <div className="flex flex-col md:flex-row gap-3 items-center mb-2 justify-between">
            <div className="flex flex-col md:flex-row gap-3 items-center">
              <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
              <img src={sighting?.plateUrlColour} alt="plate patch" className="h-16 object-contain rounded-md" />
            </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" />}
          </div>
          {hotlistNames && (
            <div className="flex flex-col border-b border-gray-600 mb-4">
              <p className="text-gray-300">Hotlists</p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-[90%] lg:gap-x-[15%] w-[50%]">
                {hotlistNames.map((hotlistName, index) => (
                  <div className="items-center px-2.5 py-0.5 rounded-sm me-2 bg-amber-500 w-55 m-2" key={index}>
                    <p className="font-medium text-2xl break-all text-amber-800">
                      {hotlistName ? hotlistName?.replace(/\.csv$/i, "") : "-"}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          )}
          <div className="flex flex-col lg:flex-row items-center gap-3">
            <img
              src={sighting?.overviewUrl}
              alt="overview patch"
              className="w-full h-56 sm:h-72 md:h-96 rounded-lg object-cover border border-gray-700"
            />
            <aside className="w-full lg:w-80  bg-gray-800/70 text-white rounded-xl py-4 px-2 border h-[70%] border-gray-700">
              <h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">Vehicle Info</h3>
              <dl className="mt-3  gap-x-4 gap-y-2 text-sm">
                <div>
                  <dt className="text-gray-300">VRM</dt>
                  <dd className="font-medium text-2xl break-all">{sighting?.vrm ?? "-"}</dd>
                </div>

                <div>
                  <dt className="text-gray-300">Motion</dt>
                  <dd className="font-medium text-2xl">{sighting?.motion ?? "-"}</dd>
                </div>
                <div>
                  <dt className="text-gray-300">Seen Count</dt>
                  <dd className="font-medium text-2xl">{sighting?.seenCount ?? "-"}</dd>
                </div>

                {sighting?.make && (
                  <div>
                    <dt className="text-gray-300">Make</dt>
                    <dd className="font-medium text-2xl">{sighting?.make ?? "-"}</dd>
                  </div>
                )}
                {sighting?.model ||
                  (!sighting?.model.trim() && (
                    <div>
                      <dt className="text-gray-300">Model</dt>
                      <dd className="font-medium text-2xl">{sighting?.model ?? "-"}</dd>
                    </div>
                  ))}
                {sighting?.color && (
                  <div className="sm:col-span-2">
                    <dt className="text-gray-300">Colour</dt>
                    <dd className="font-medium text-2xl">{sighting?.color ?? "-"}</dd>
                  </div>
                )}

                <div>
                  <dt className="text-gray-300">Time</dt>
                  <dd className="font-medium text-xl">{sighting?.timeStamp ?? "-"}</dd>
                </div>
              </dl>
            </aside>
          </div>

          <div className="mt-3 flex-col-reverse gap-3 md:flex-row md:justify-center hidden md:flex">
            {onDelete ? (
              <button
                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-blue-600 text-white hover:bg-blue-700 w-full md:w-full"
                onClick={handleClose}
              >
                <FontAwesomeIcon icon={faX} />
                Close
              </button>
            ) : (
              <button
                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-green-600 text-white hover:bg-green-700 w-full md:w-full"
                onClick={handleAcknowledgeButton}
              >
                <FontAwesomeIcon icon={faCheck} />
                Acknowledge
              </button>
            )}
            {onDelete ? (
              <button
                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
                onClick={() => handleDeleteClick(sighting)}
              >
                <FontAwesomeIcon icon={faTrash} />
                Delete
              </button>
            ) : (
              <button
                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
                onClick={handleClose}
              >
                <FontAwesomeIcon icon={faX} />
                Deny
              </button>
            )}
          </div>
        </div>
      </ModalComponent>
      <Toaster />
    </>
  );
};

export default SightingModal;