import { motion } from "motion/react";
import HumanIcon from "./icons/HumanIcon";
import Button from "./ui/Button";
import ArrowRightIcon from "./icons/ArrowRightIcon";
import CloseIcon from "./icons/CloseIcon";
import { useQuery } from "@tanstack/react-query";
import { api } from "../api/ky";
import IMarker from "../types/IMarker";
import { formattedUnitTypes } from "../data/formattedUnitTypes";
import { useNavigate } from "react-router";

function NewSelectedComplexCard({
  marker,
  onClose,
}: {
  marker: IMarker;
  onClose: () => void;
}) {
  const { data: unitTypes } = useQuery({
    queryKey: ["filters", "unitTypes", marker.title],
    queryFn: () =>
      api
        .get(`units/filters/unitTypes?project=Rove Home ${marker.title}`)
        .json<string[]>(),
  });

  const navigate = useNavigate();

  return (
    <motion.div
      key={marker.name}
      initial={{ opacity: 0, y: "100%" }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: "100%" }}
      transition={{ duration: 0.3 }}
      className="absolute w-full p-4 pb-6 bottom-0 bg-white rounded-t-2xl z-1"
    >
      <div className="space-y-4">
        <div className="left-1/2 -translate-x-1/2 top-2 absolute bg-[#E2E2DC] w-[6.667vw] aspect-[6/1] rounded-2xl" />
        <Button
          onlyIcon
          className="!bg-[#F3F3F2] absolute top-4 right-4"
          onClick={onClose}
        >
          <span className="w-5 h-5 text-[#0D1922]">
            <CloseIcon />
          </span>
        </Button>
        <div className="space-y-2">
          <p className="text-h5 font-medium">{marker.title}</p>
          <div className="flex gap-1">
            <div className="px-2 py-0.5 bg-[#F3F3F2] rounded">
              <p className="text-caption-s opacity-70"># Apartments</p>
            </div>
            <div className="rounded px-2 py-0.5 flex items-center justify-center gap-1 bg-[#30B216]/8">
              <span className="text-[#30B216] w-[3.333vw] h-[3.333vw]">
                <HumanIcon />
              </span>
              <p className="text-caption-s text-[#30B216]">Virtual Tour</p>
            </div>
          </div>
        </div>
        <hr className="border-[#E2E2DC] h-px" />
        <div className="space-y-2">
          {unitTypes?.map((unitType) => (
            <div key={unitType} className="flex items-center gap-2">
              <div className="rounded-full flex justify-center items-center w-[4.444vw] h-[4.444vw] bg-[#00BED7] text-white text-caption-s">
                4
              </div>
              <p className="opacity-70 text-caption-m">
                {formattedUnitTypes.get(unitType)}
              </p>
            </div>
          ))}
        </div>
        <Button
          className="w-full"
          onTouchStart={() => navigate(`/complex/${marker.name}`)}
        >
          <p className="text-btn-m">Explore</p>
          <span className="w-5 h-5">
            <ArrowRightIcon />
          </span>
        </Button>
      </div>
    </motion.div>
  );
}

export default NewSelectedComplexCard;