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

import { faCheck, 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";

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

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

  const handleAcknowledgeButton = () => {
    if (!sighting) {
      toast.error("Cannot add sigthing to alert list");
      handleClose();
      return;
    }
    dispatch({ type: "ADD", payload: sighting });
    toast.success("Sighting successfully added to alert list");
    handleClose();
  };

  const motionAway = (sighting?.motion ?? "").toUpperCase() === "AWAY";

  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="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>
          <div className="flex flex-col md: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 md:w-80 lg:w-[40%] 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>

                <div>
                  <dt className="text-gray-300">Make</dt>
                  <dd className="font-medium text-2xl">
                    {sighting?.make ?? "-"}
                  </dd>
                </div>
                <div>
                  <dt className="text-gray-300">Model</dt>
                  <dd className="font-medium text-2xl">
                    {sighting?.model ?? "-"}
                  </dd>
                </div>
                <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 flex-col-reverse gap-3 md:flex-row md:justify-center">
            <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} />
              Accept
            </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;