Mav-Mobile-UI/src/components/SessionForm/SessionCard.tsx

import Card from "../UI/Card";
import CardHeader from "../UI/CardHeader";
import { useNPEDContext } from "../../context/NPEDUserContext";
import type { ReducedSightingType } from "../../types/types";
import { toast } from "sonner";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFloppyDisk, faPause, faPlay, faStop } from "@fortawesome/free-solid-svg-icons";

const SessionCard = () => {
  const { sessionStarted, setSessionStarted, sessionList } = useNPEDContext();

  const handleStartClick = () => {
    setSessionStarted(!sessionStarted);
    toast(`${sessionStarted ? "Vehicle tracking session Ended" : "Vehicle tracking session  Started"}`);
  };

  const handleSaveCick = () => {
    console.log("clicked");
  };

  const sightings = [...new Map(sessionList.map((vehicle) => [vehicle.vrm, vehicle]))];

  const dedupedSightings = sightings.map((sighting) => sighting[1]);

  const vehicles = dedupedSightings.reduce<Record<string, ReducedSightingType[]>>(
    (acc, item) => {
      const hotlisthit = Object.values(item.metadata?.hotlistMatches ?? {}).includes(true);
      if (item.metadata?.npedJSON["NPED CATEGORY"] === "A") acc.npedCatA.push(item);
      if (item.metadata?.npedJSON["NPED CATEGORY"] === "B") acc.npedCatB.push(item);
      if (item.metadata?.npedJSON["NPED CATEGORY"] === "C") acc.npedCatC.push(item);
      if (item.metadata?.npedJSON["NPED CATEGORY"] === "D") acc.npedCatD.push(item);
      if (item.metadata?.npedJSON["TAX STATUS"] === false) acc.notTaxed.push(item);
      if (item.metadata?.npedJSON["MOT STATUS"] === false) acc.notMOT.push(item);
      if (hotlisthit) acc.hotlistHit.push(item);
      return acc;
    },
    {
      npedCatA: [],
      npedCatB: [],
      npedCatC: [],
      npedCatD: [],
      notTaxed: [],
      notMOT: [],
      hotlistHit: [],
    }
  );

  return (
    <Card className="p-4 col-span-3">
      <CardHeader title="Session" />
      <div className="flex flex-col gap-4 px-3">
        <button
          className={`${sessionStarted ? "bg-red-600" : "bg-[#26B170]"} text-white px-4 py-2 rounded ${
            sessionStarted ? "hover:bg-red-700" : "hover:bg-green-700"
          }  transition w-full`}
          onClick={handleStartClick}
        >
          <div className="flex flex-row gap-3 items-center justify-self-center">
            <FontAwesomeIcon icon={sessionStarted ? faStop : faPlay} />
            <p>{sessionStarted ? "End Session" : "Start Session"}</p>
          </div>
        </button>
        <div className="flex flex-col lg:flex-row gap-5">
          {sessionStarted && (
            <button
              className={`bg-blue-600 text-white px-4 py-2 rounded transition w-full lg:w-[50%]`}
              onClick={handleSaveCick}
            >
              <div className="flex flex-row gap-3 items-center justify-self-center">
                <FontAwesomeIcon icon={faFloppyDisk} />
                <p>Save session</p>
              </div>
            </button>
          )}
          {sessionStarted && (
            <button
              className={`bg-gray-300 text-gray-800 px-4 py-2 rounded transition w-full lg:w-[50%]`}
              onClick={handleSaveCick}
            >
              <div className="flex flex-row gap-3 items-center justify-self-center">
                <FontAwesomeIcon icon={faPause} />
                <p>Pause session</p>
              </div>
            </button>
          )}
        </div>

        <ul className="text-white space-y-2">
          <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between">
            <p>Number of Vehicles sightings:</p>
            <span className="font-bold text-green-600 text-xl">{dedupedSightings.length}</span>
          </li>
          <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between">
            <p>Vehicles without Tax:</p>
            <span className="font-bold text-amber-600 text-xl">{vehicles.notTaxed.length}</span>
          </li>
          <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between">
            <p>Vehicles without MOT:</p>{" "}
            <span className="font-bold text-red-500 text-xl">{vehicles.notMOT.length}</span>
          </li>
          <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between">
            <p>Vehicles on Hotlists:</p>{" "}
            <span className="font-bold text-blue-500 text-xl">{vehicles.hotlistHit.length}</span>
          </li>
          <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between">
            <p>Vehicles with NPED Cat A:</p>
            <span className="font-bold text-gray-300 text-xl">{vehicles.npedCatA.length}</span>
          </li>
          <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between">
            <p>Vehicles with NPED Cat B:</p>{" "}
            <span className="font-bold text-gray-300 text-xl">{vehicles.npedCatB.length}</span>
          </li>
          <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between">
            Vehicles with NPED Cat C:{" "}
            <span className="font-bold text-gray-300 text-xl">{vehicles.npedCatC.length}</span>
          </li>
        </ul>
      </div>
    </Card>
  );
};

export default SessionCard;