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 NPED_CAT_D from "/NPED_Cat_D.svg";
import { checkIsHotListHit, getHotlistName, getNPEDCategory, getNPEDReason } from "../../utils/utils";

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

const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }: SightingModalProps) => {
  console.log(sighting);
  const { dispatch } = useAlertHitContext();

  const { query, mutation } = useCameraBlackboard();

  const hotlistNames = getHotlistName(sighting?.metadata?.hotlistMatches);
  const handleAcknowledgeButton = async () => {
    try {
      if (!sighting) {
        toast.error("Cannot add sighting to alert list");
        handleClose();
        return;
      }
      if (!query.data.alertHistory) {
        await mutation.mutateAsync({
          operation: "INSERT",
          path: "alertHistory",
          value: [sighting],
        });
        await mutation.mutateAsync({
          operation: "SAVE",
          path: "",
          value: null,
        });
      } else {
        await mutation.mutateAsync({
          operation: "APPEND",
          path: "alertHistory",
          value: sighting,
        });
        await mutation.mutateAsync({
          operation: "SAVE",
          path: "",
          value: null,
        });
        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";
  const isNPEDHitD = cat === "D";

  const reason = getNPEDReason(sighting);

  const insuranceStatus = reason ? reason["INSURANCE STATUS"] : null;
  const motStatus = reason ? reason["MOT STATUS"] : null;
  const taxStatus = reason ? reason["TAX STATUS"] : null;

  return (
    <>
      <ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}>
        <div className="mx-auto py-4 px-6 overflow-y-scroll">
          <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" />}
            {isNPEDHitD && <img src={NPED_CAT_D} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
          </div>
          {hotlistNames && hotlistNames.length > 0 && (
            <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 md:gap-x-[20%] w-[50%]">
                {hotlistNames.map((hotlistName, index) => (
                  <span className="items-center px-2.5 py-0.5 rounded-sm me-2 bg-amber-500 w-50 m-2" key={index}>
                    <p className="font-medium text-2xl break-all text-amber-800">
                      {hotlistName ? hotlistName?.replace(/\.csv$/i, "") : "-"}
                    </p>
                  </span>
                ))}
              </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-72 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>
                  <dd className="font-medium text-2xl break-all font-mono tracking-wide">{sighting?.vrm ?? "-"}</dd>
                </div>
                {isNPEDHitA || isNPEDHitB || isNPEDHitC || isNPEDHitD ? (
                  <>
                    <div className="">
                      <dt className="text-gray-300 text-xl">Insurance</dt>
                      <dd className="font-medium text-2xl flex">
                        {insuranceStatus ? (
                          <span
                            className={`text-green-600 bg-green-300 w-[30%] px-2 rounded-lg border border-green-900`}
                          >
                            YES
                          </span>
                        ) : (
                          <span className={`text-red-300 bg-red-600 w-[30%] px-2 rounded-lg border border-red-900`}>
                            NO
                          </span>
                        )}
                      </dd>
                    </div>
                    <div>
                      <dt className="text-gray-300 text-3xl">MOT</dt>
                      <dd className="font-medium text-2xl">
                        {motStatus ? (
                          <span
                            className={`text-green-700 bg-green-400 w-[30%] px-2 rounded-lg border border-green-900`}
                          >
                            VALID
                          </span>
                        ) : (
                          <span className={`text-red-600 bg-red-300 w-[30%] px-2 rounded-lg border border-red-900`}>
                            EXPIRED
                          </span>
                        )}
                      </dd>
                    </div>
                    <div>
                      <dt className="text-gray-300 text-3xl">Tax</dt>
                      <dd className="font-medium text-2xl">
                        {taxStatus ? (
                          <span
                            className={`text-green-700 bg-green-400 w-[30%] px-2 rounded-lg border border-green-900`}
                          >
                            VALID
                          </span>
                        ) : (
                          <span className={`text-red-600 bg-red-300 w-[30%] px-2 rounded-lg border border-red-900`}>
                            EXPIRED
                          </span>
                        )}
                      </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 && sighting.make.trim() && sighting.make.toLowerCase() !== "disabled" && (
                      <div>
                        <dt className="text-gray-300">Make</dt>
                        <dd className="font-medium text-2xl">{sighting.make}</dd>
                      </div>
                    )}

                    {sighting?.model && sighting.model.trim() && sighting.model.toLowerCase() !== "disabled" && (
                      <div>
                        <dt className="text-gray-300">Model</dt>
                        <dd className="font-medium text-2xl">{sighting.model}</dd>
                      </div>
                    )}

                    {sighting?.color && sighting.color.trim() && sighting.color.toLowerCase() !== "disabled" && (
                      <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;