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 { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
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, getNPEDCategory } from "../../utils/utils";
import { faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

type AlertItemProps = {
  item: SightingType;
};

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

  // const {d} = useCameraBlackboard();
  const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";

  const isHotListHit = checkIsHotListHit(item);
  const cat = getNPEDCategory(item);
  const isNPEDHitA = cat === "A";
  const isNPEDHitB = cat === "B";
  const isNPEDHitC = cat === "C";

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

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

  const handleDelete = async (deletedItem: SightingType | null) => {
    const res = await mutation.mutateAsync({
      operation: "VIEW",
      path: "alertHistory",
    });
    const oldArray = res?.result;
    const updatedArray = oldArray?.filter((item: SightingType) => item?.ref !== deletedItem?.ref);

    mutation.mutate({
      operation: "INSERT",
      path: "alertHistory",
      value: updatedArray,
    });
    dispatch({ type: "REMOVE", payload: item });
  };
  return (
    <div className="flex flex-col w-full relative">
      <div className="border border-gray-600 rounded-lg items-center py-1">
        <InfoBar obj={item} />
        <button onClick={() => handleDelete(item)} className="absolute right-2 top-1">
          <FontAwesomeIcon icon={faTrash} size="xl" />
        </button>
        <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="NPEDHITicon" className="h-20 object-contain rounded-md" />}
          {isNPEDHitB && <img src={NPED_CAT_B} alt="NPEDHITicon" className="h-20 object-contain rounded-md" />}
          {isNPEDHitC && <img src={NPED_CAT_C} alt="NPEDHITicon" className="h-20 object-contain rounded-md" />}
          <div className={`border p-1 hidden md:block`}>
            <img src={item?.plateUrlColour} height={48} width={200} alt="colour patch" />
          </div>
          <div className="h-20">
            <NumberPlate vrm={item.vrm} motion={motionAway} />
          </div>
        </div>
        <SightingModal
          isSightingModalOpen={isModalOpen}
          handleClose={closeModal}
          sighting={item}
          onDelete={handleDelete}
        />
      </div>
    </div>
  );
};

export default AlertItem;