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";

type AlertItemProps = {
  item: SightingType;
};

const AlertItem = ({ item }: AlertItemProps) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
  const isHotListHit = item?.metadata?.hotlistMatches?.Hotlist0 === true;

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

  const closeModal = () => {
    setIsModalOpen(false);
  };
  return (
    <>
      <InfoBar obj={item} />
      <div
        className=" flex flex-row p-4 border border-gray-400 rounded-lg items-center w-full mx-auto justify-between"
        onClick={handleClick}
      >
        {isHotListHit && (
          <img
            src={HotListImg}
            alt="hotlistHit"
            className="h-20 object-contain rounded-md"
          />
        )}

        <div className="flex flex-col">
          <small>MAKE: {item.make}</small>
          <small>MODEL: {item.model}</small>
          <small>COLOUR: {item.color}</small>
        </div>

        <NumberPlate vrm={item.vrm} motion={motionAway} />
      </div>
      <SightingModal
        isSightingModalOpen={isModalOpen}
        handleClose={closeModal}
        sighting={item}
      />
    </>
  );
};

export default AlertItem;