/* eslint-disable react-hooks/exhaustive-deps */
import { useFavoritesUnitsStore } from "../stores/useFavoritesUnitsStore";
import { Unit } from "../types/IUnit";
import FilledHeartIcon from "./icons/FilledHeartIcon";
import HeartIcon from "./icons/HeartIcon";
import Button from "./ui/Button";
import "react-loading-skeleton/dist/skeleton.css";
import Skeleton from "react-loading-skeleton";
import { formattedUnitTypes } from "../data/formattedUnitTypes";
import { Link } from "react-router";
import complexNameToSlug from "../utils/complexNameToSlug";
import { projects } from "../data/projects";
import { useEffect, useState } from "react";
import { getUnitTypeVariantMarasiDrive } from "../utils/getUnitTypeVariantMarasiDrive";
import { getUnitTypeVariantDubaiMarina } from "../utils/getUnitTypeVariantDubaiMarina";

function UnitCard({ unit }: { unit: Unit }) {
  const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore();
  const [complexSlug, setComplexSlug] = useState("");

  function handleFavorite(e: React.MouseEvent<HTMLButtonElement>) {
    e.preventDefault();
    if (favoriteUnits.some((favoriteUnit) => favoriteUnit.id === unit.id)) {
      setFavoriteUnits(
        favoriteUnits.filter((favoriteUnit) => favoriteUnit.id !== unit.id)
      );
    } else {
      setFavoriteUnits([...favoriteUnits, unit]);
    }
  }

  useEffect(() => {
    const complexSlug = projects.find(
      (project) => project.title === unit.project
    )?.slug;

    if (complexSlug) {
      setComplexSlug(complexSlug);
    }
  }, [unit]);

  return (
    <Link
      target="_blank"
      to={`/complex/${complexNameToSlug(unit.project)}/${unit.unitNo}`}
      className="2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] rounded-2xl 2xl:space-y-[1.111vw] space-y-4 bg-white hover:-translate-y-2 transition-[translate,box-shadow] duration-300 hover:[box-shadow:0_4px_16px_0_rgba(0,0,0,.1)]"
    >
      <div className="flex items-center justify-between">
        <div className="2xl:space-y-[0.278vw] space-y-1">
          <p className="text-s text-[#00BED7]">
            {unit.project || <Skeleton />}
          </p>
          <div className="flex items-center 2xl:gap-[0.556vw] gap-2">
            <p className="text-caption-m">
              <span>
                {`${unit.unitNo.split("-")[0] === "W" ? "West" : "East"} Wing`}
              </span>
            </p>
            <div className="2xl:w-[0.278vw] w-1 aspect-square bg-[#E2E2DC] rounded-full" />
            <p className="text-caption-m">Floor {unit.floor}</p>
            <div className="2xl:w-[0.278vw] w-1 aspect-square bg-[#E2E2DC] rounded-full" />
            <p className="text-caption-m">{unit.unitNo}</p>
          </div>
        </div>
        <Button onlyIcon variant="secondary" onClick={handleFavorite}>
          <span className="2xl:w-[1.389vw] w-5 aspect-square text-[#0D1922]/70">
            {favoriteUnits.some(
              (favoriteUnit) => favoriteUnit.id === unit.id
            ) ? (
              <FilledHeartIcon />
            ) : (
              <HeartIcon />
            )}
          </span>
        </Button>
      </div>
      <div className="2xl:rounded-[0.556vw] rounded-xl 2xl:p-[0.556vw] p-2 overflow-hidden mx-auto">
        <img
          src={`/images/unit-types/${complexSlug}/${
            complexSlug === "marasi-drive"
              ? getUnitTypeVariantMarasiDrive(unit.unitNo)
              : getUnitTypeVariantDubaiMarina(unit.unitNo)
          }.jpg`}
          alt=""
          className="object-cover pointer-events-none"
        />
      </div>
      <div className="2xl:space-y-[0.278vw] space-y-1">
        <p className="text-s">
          {`${formattedUnitTypes.get(
            unit.unitType
          )}, ${unit.squareFt.toLocaleString(undefined, {
            maximumFractionDigits: 2,
          })} Sqft`}
        </p>
        {
          <p className="text-[#00BED7] text-h4 font-medium">
            {`AED ${Intl.NumberFormat("ar-AE", {
              currency: "AED",
              minimumFractionDigits: 0,
            }).format(unit.salesPrice)}`}
          </p>
        }
      </div>
    </Link>
  );
}

export default UnitCard;