import { useNavigate } from "react-router-dom";
import Button from "./Button";
// import { formatNumber } from "../calc/formatNumber";
import { IAparmentRes } from "../types/apartmentsRes";

interface ApartmentSidebarProps {
  currentApartment: IAparmentRes;
}

const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
  const navigate = useNavigate();
  const unitNo = currentApartment.Unit_No.split("-")[1];
  const wing =
    currentApartment.Unit_No.split("-")[0] === "E" ? "East Wing" : "West Wing";

  const handleOn3DTourClick = () => {
    navigate(`../virtual-tour/${currentApartment.id}`);
  };

  return (
    <div className="flex lg:flex-col gap-2 h-full">
      <div className="rounded-2xl overflow-clip lg:flex-1 flex-none relative">
        <p className="absolute top-[30px] left-6 font-semibold text-m text-white">
          View from window
        </p>
        <img
          src="/images/view_from_window.png"
          alt=""
          className="w-full h-full object-cover"
        />
      </div>
      <div className="flex gap-2 flex-col flex-1 lg:flex-none">
        <div className="flex flex-col rounded-2xl bg-white p-6 gap-6 ">
          <h2 className="font-semibold text-[#0D1922] text-subheadline-s">
            Parameters
          </h2>
          <div className="flex flex-col gap-3">
            <div className="flex justify-between text-m">
              <p className="text-[#73787C]">Complex</p>
              <p className="text-[#0D1922]">{currentApartment.Project_Name}</p>
            </div>
            <div className="flex justify-between text-m">
              <p className="text-[#73787C]">Section</p>
              <p className="text-[#0D1922]">{wing}</p>
            </div>
            <div className="flex justify-between text-m">
              <p className="text-[#73787C]">Floor</p>
              <p className="text-[#0D1922]">{currentApartment.Floor}</p>
            </div>
            <div className="flex justify-between text-m">
              <p className="text-[#73787C]">Number</p>
              <p className="text-[#0D1922]">{unitNo}</p>
            </div>
            <div className="flex justify-between text-m">
              <p className="text-[#73787C]">Size</p>
              <p className="text-[#0D1922]">
                {Number(currentApartment.Total_Area_Sqft).toFixed(2)} Sqft
              </p>
            </div>
          </div>
          <p className="text-[#00BED7] font-semibold text-subheadline-s leading-7">
            Unavailable
            {/* AED {formatNumber(1668888, ",", 3, 1)} */}
          </p>
        </div>
        <div className="rounded-2xl bg-white flex flex-col p-6 gap-4 flex-1 lg:flex-none justify-between">
          <div className="flex gap-2">
            <Button
              onClick={handleOn3DTourClick}
              text="3D Tour"
              buttonType="secondary"
              className="w-full flex justify-center"
            />
            <Button
              text="Send Enquiry"
              buttonType="cta"
              className="w-full flex justify-center"
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default ApartmentSidebar;