import useWingSidebar from "../../store/useWingSidebar";
import { IAparmentRes } from "../../types/apartmentsRes";
import { IDesctiptionFloor } from "../../types/descriptionFloor";

interface FloorDescriptionProps {
  descriptionFloor: IDesctiptionFloor | null;
  floorApartments: IAparmentRes[];
  isLeft: boolean;
}

const FloorDescription = ({
  descriptionFloor,
  floorApartments,
  isLeft,
}: FloorDescriptionProps) => {
  const { isSidebar } = useWingSidebar();
  return (
    <>
      <div
        className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[364px] absolute left-[414px] transition-opacity duration-300 desc-shadow ${
          isSidebar ? "opacity-0" : "opacity-100"
        }`}
      >
        <div className="relative">
          <div className="flex justify-between border-b pb-4">
            <div className="flex flex-col">
              <p
                className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out`}
              >
                {descriptionFloor?.floor} Floor
              </p>
              <p className="text-[#73787C] font-semibold text-caption-m">
                {descriptionFloor?.wing}
              </p>
            </div>
            <div className="py-[3px] px-2 rounded-full bg-[#00BED7] text-white justify-start self-start">
              {floorApartments.length} units
            </div>
          </div>
          <div className="flex flex-col gap-4 pt-4">
            <div className="flex items-center justify-between gap-8">
              <div className="flex gap-2 items-center">
                <div className="min-w-6 min-h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
                  <p className="p-1 flex justify-center items-center">
                    {
                      floorApartments.filter(
                        (apart) => apart.Unit_Type === "Studio Flex"
                      ).length
                    }
                  </p>
                </div>
                <p className="text-s text-[#73787C] w-full">Studio Flex</p>
              </div>
              <p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
            </div>
            <div className="flex items-center justify-between gap-8">
              <div className="flex gap-2 items-center">
                <div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
                  <p className="h-full w-full flex justify-center items-center">
                    {
                      floorApartments.filter(
                        (apart) => apart.Unit_Type === "Studio Squared"
                      ).length
                    }
                  </p>
                </div>
                <p className="text-s text-[#73787C]">Studio</p>
              </div>
              <p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
            </div>
            <div className="flex items-center justify-between gap-8">
              <div className="flex gap-2 items-center">
                <div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
                  <p className="h-full w-full flex justify-center items-center">
                    {
                      floorApartments.filter(
                        (apart) => apart.Unit_Type === "1 BR Squared"
                      ).length
                    }
                  </p>
                </div>
                <p className="text-s text-[#73787C]">1 Bedroom</p>
              </div>
              <p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
            </div>
            <div className="flex items-center justify-between gap-8">
              <div className="flex gap-2 items-center">
                <div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
                  <p className="h-full w-full flex justify-center items-center">
                    {
                      floorApartments.filter(
                        (apart) => apart.Unit_Type === "2 BR Squared"
                      ).length
                    }
                  </p>
                </div>
                <p className="text-s text-[#73787C] text-nowrap">
                  2 Bedroom, Type A
                </p>
              </div>
              <p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
            </div>
          </div>
          <div
            className={`w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white  absolute top-0 ${
              !isLeft ? "-left-[35px] -rotate-90" : "-right-[35px] rotate-90"
            } `}
          ></div>
        </div>
      </div>
    </>
  );
};

export default FloorDescription;