import { formattedUnitTypes } from "../data/formattedUnitTypes";
import ArrowRightIcon from "./icons/ArrowRightIcon";
import HumanIcon from "./icons/HumanIcon";
import Button from "./ui/Button";
import { usePopupStore } from "../stores/usePopupStore";

interface UnitPopupProps {
  unitType: string;
  wing?: "East" | "West";
  floor: number;
  unitNumber: string;
  squareFt: number;
  suitesArea: number;
  balconyArea: number;
  price: number;
  complexName: string;
}

function UnitPopup({
  unitType,
  wing,
  floor,
  unitNumber,
  squareFt,
  complexName,
}: UnitPopupProps) {
  const { setPopup } = usePopupStore();

  return (
    <div className="flex flex-col 2xl:gap-y-[1.111vw] gap-y-4">
      <div className="2xl:space-y-[0.833vw] space-y-3">
        <div className="2xl:space-y-[0.556vw] space-y-2">
          <p className="text-h5 font-medium">
            {formattedUnitTypes.get(unitType)}
          </p>
          <div className="flex items-center 2xl:gap-[0.556vw] gap-2">
            {wing && (
              <>
                <p className="text-caption-s opacity-70">{wing} Wing</p>
                <div className="2xl:size-[0.278vw] size-1 rounded-full bg-[#E2E2DC]" />
              </>
            )}
            <p className="text-caption-s opacity-70">Floor {floor}</p>
            <div className="2xl:size-[0.278vw] size-1 rounded-full bg-[#E2E2DC]" />
            <p className="text-caption-s opacity-70">{unitNumber}</p>
          </div>
          <div className="2xl:p-[0.208vw] p-[3px] 2xl:rounded-[0.278vw] rounded bg-[#30B216] bg-opacity-[8%] flex 2xl:gap-[0.278vw] gap-1 w-fit">
            <span className="2xl:size-[0.833vw] size-3 text-[#30B216]">
              <HumanIcon />
            </span>
            <p className="text-caption-s text-[#30B216]">Virtual Tour</p>
          </div>
        </div>
      </div>
      <hr className="2xl:h-[0.069vw] h-px border-[#E2E2DC]" />
      <div className="flex flex-col 2xl:gap-[0.556vw] gap-2">
        <div className="flex 2xl:gap-[0.556vw] gap-2 justify-between">
          <p className="text-caption-m opacity-70">Total Area</p>
          <p className="text-caption-m">{squareFt.toFixed(2)} Sqft</p>
        </div>
        {/* <div className="flex 2xl:gap-[0.556vw] gap-2 justify-between">
          <p className="text-caption-m opacity-70">Suites Area</p>
          <p className="text-caption-m">{suitesArea.toFixed(2)} Sqft</p>
        </div>
        <div className="flex 2xl:gap-[0.556vw] gap-2 justify-between">
          <p className="text-caption-m opacity-70">Balcony Area</p>
          <p className="text-caption-m">{balconyArea.toFixed(2)} Sqft</p>
        </div> */}
      </div>
      {/* <p className="text-h5 font-medium text-[#00BED7]">
          {`AED ${Intl.NumberFormat("ar-AE", {
            currency: "AED",
            minimumFractionDigits: 0,
          }).format(price)}`}
        </p> */}
      <Button
        variant="cta"
        size="small"
        className="2xl:hidden w-full"
        onClick={() => {
          window.open(`/complex/${complexName}/${unitNumber}`, "_blank");
          setPopup(null);
        }}
      >
        <span>Explore</span>
        <span className="size-4 text-white">
          <ArrowRightIcon />
        </span>
      </Button>
    </div>
  );
}

export default UnitPopup;