IRTH-2/client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx

import { useState } from "react";
import { IDesctiptionFloor } from "../../../types/descriptionFloor";
import useModal from "../../../store/useModal";
import EastWingFloorLayout from "./EastWingFloorLayout";
import Button from "../../Button";
import CloseIcon from "../../icons/CloseIcon";
import useWingSidebar from "../../../store/useWingSidebar";
import api from "../../../utils/api";
import UnitPopup from "./UnitPopup";
import IUnit from "../../../types/IUnit";
import WestWingFloorLayout from "./WestWingFloorLayout";
import WestWingBottomFloorLayout from "./WestWingBottomFloorLayout";
import UnitModal from "../../modals/UnitModal";

interface Props {
  currentFloor: IDesctiptionFloor | null;
}

function FloorSidebar({ currentFloor }: Props) {
  const { setModal } = useModal();
  const { setIsSidebar } = useWingSidebar();
  const [hoveredUnit, setHoveredUnit] = useState<IUnit | undefined>();
  const [isShowPopup, setIsShowPopup] = useState(false);
  const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
  const [type, setType] = useState<string | null>(null);

  async function getUnit(unitNumber: string) {
    if (!currentFloor) return;

    try {
      const result: IUnit[] = await api
        .get(
          `units?unitNo=${currentFloor.wing[0]}-${
            currentFloor.floor
          }${unitNumber.padStart(2, "0")}`
        )
        .json();

      setHoveredUnit(result[0]);
    } catch (error) {
      alert((error as Error).message);
    }
  }

  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
    const x = e.clientX - e.currentTarget.getBoundingClientRect().left;
    const y = e.clientY - e.currentTarget.getBoundingClientRect().top;
    setMousePos([x, y]);
  }

  async function handleMouseEnter(e: React.MouseEvent<SVGPathElement>) {
    const unitNumber = e.currentTarget.dataset.number;
    const type = e.currentTarget.dataset.type;

    if (!unitNumber || !type) return;

    getUnit(unitNumber);
    setType(type);
    setIsShowPopup(true);
    setHoveredUnit(hoveredUnit);
  }

  function handleMouseLeave() {
    setIsShowPopup(false);
    setHoveredUnit(undefined);
  }

  function handleClick() {
    if (!hoveredUnit || !type) return;

    setModal(<UnitModal unit={hoveredUnit} type={type} />);
  }

  return (
    <div
      className="absolute w-full h-[calc(100vh-56px)] right-0 z-30 bg-[#F3F3F2] p-6 top-[56px] flex flex-col"
      onMouseMove={handleMouseMove}
    >
      <div className="flex justify-between pb-4">
        <div className="flex flex-col">
          <h1 className="text-subheadline-m font-semibold text-[#0D1922]">
            {currentFloor?.floor} Floor
          </h1>
          <p className="text-s text-[#73787C]">{currentFloor?.wing}</p>
        </div>
        <Button
          buttonType="cta"
          icon={<CloseIcon />}
          onClick={() => setIsSidebar(false)}
        />
      </div>
      <div className="px-4 py-[18px] bg-white flex justify-between text-[#73787C] font-semibold text-caption-m rounded-2xl mb-2">
        <div className="flex gap-6">
          <div className="gap-2 flex items-center">
            <div className="rounded-full bg-[#A19E9E] w-3 h-3"></div>
            <p>Studio Flex</p>
          </div>
          <div className="gap-2 flex items-center">
            <div className="rounded-full bg-[#8299AD] w-3 h-3"></div>
            <p>Studio</p>
          </div>
          <div className="gap-2 flex items-center">
            <div className="rounded-full bg-[#A19E9E] w-3 h-3"></div>
            <p>1 Bedroom</p>
          </div>
          <div className="gap-2 flex items-center">
            <div className="rounded-full bg-[#BFC9D1] w-3 h-3"></div>
            <p>1 Bedroom</p>
          </div>
          <div className="gap-2 flex items-center">
            <div className="rounded-full bg-[#B2B8C4] w-3 h-3"></div>
            <p>2 Bedroom</p>
          </div>
        </div>
        {/* <div className="bg-[#00BED7] text-white text-s px-2 py-[3px] rounded-3xl flex h-fit">
            {floorApartments.length} units
          </div> */}
      </div>
      <svg className="flex-1 px-10 bg-white font-semibold text-caption-m rounded-2xl py-4">
        {currentFloor?.wing === "West Wing" ? (
          currentFloor && currentFloor.floor <= 21 ? (
            <WestWingBottomFloorLayout
              onMouseEnter={handleMouseEnter}
              onMouseLeave={handleMouseLeave}
              onClick={handleClick}
            />
          ) : (
            <WestWingFloorLayout
              onMouseEnter={handleMouseEnter}
              onMouseLeave={handleMouseLeave}
              onClick={handleClick}
            />
          )
        ) : (
          <EastWingFloorLayout
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
            onClick={handleClick}
          />
        )}
      </svg>
      <UnitPopup
        unit={hoveredUnit}
        type={type}
        isShowPopup={isShowPopup}
        mousePos={mousePos}
      />
    </div>
  );
}

export default FloorSidebar;