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

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from "react";
import IUnit from "../../../types/IUnit";
import Button3 from "../../Button3";
import CloseIcon from "../../icons/CloseIcon";
import UnitPopup from "./UnitPopup";
import api from "../../../utils/api";
import useModal from "../../../store/useModal";
import UnitModal from "../../modals/UnitModal";
import { isMobile } from "react-device-detect";
import WestWingFloorPlanLower from "./WestWingFloorPlanLower";
import WestWingFloorPlanUpper from "./WestWingFloorPlanUpper";
import EastWingFloorPlan from "./EastWingFloorPlan";

interface Props {
  floor: number;
  wing: string;
  onClose: () => void;
}

function FloorPlanSidebar({ floor, wing, onClose }: Props) {
  const { setModal } = useModal();
  const [hoveredUnit, setHoveredUnit] = useState<IUnit | undefined>();
  const [showPopup, setShowPopup] = useState(false);
  const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
  const [type, setType] = useState<string | null>(null);

  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);
    setShowPopup(true);
    setHoveredUnit(hoveredUnit);
  }

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

  function handleMouseMove(e: React.MouseEvent) {
    const x = e.clientX - e.currentTarget.getBoundingClientRect().left;
    const y = e.clientY - e.currentTarget.getBoundingClientRect().top;

    console.log(x, y);

    setMousePos([x, y]);
  }

  function handleClick() {
    console.log("hoveredUnit", hoveredUnit);
    console.log("type", type);

    if (!hoveredUnit || !type) return;

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

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

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

  useEffect(() => {
    if (!isMobile || !hoveredUnit || !type) return;

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

  return (
    <div className="flex flex-col flex-1 gap-4 p-4 select-none sm:p-6 mt-14">
      <div className="flex items-start justify-between">
        <div>
          <p
            className={`text-2xl text-[#0D1922] font-semibold ${
              floor ? "opacity-100" : "opacity-0"
            }`}
          >
            {floor} floor
          </p>
          <p className="text-sm">{wing} Wing</p>
        </div>
        <Button3
          icon={<CloseIcon className="w-5 h-5" />}
          onlyIcon
          onClick={onClose}
        />
      </div>
      <div className="flex flex-col flex-1 space-y-2 max-sm:w-screen max-sm:-m-4">
        <div className="flex items-center justify-end p-4 bg-white xl:justify-between rounded-2xl max-xl:hidden">
          <div className="flex gap-6 max-xl:hidden">
            <div className="flex items-center gap-2">
              <div className="w-5 h-5 text-white rounded-full bg-[#A19E9E] text-xs flex items-center justify-center"></div>
              <p className="text-xs font-semibold">Studio Flex</p>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-5 h-5 text-white rounded-full bg-[#8299AD] text-xs flex items-center justify-center"></div>
              <p className="text-xs font-semibold">Studio²</p>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-5 h-5 text-white rounded-full bg-[#BFC9D1] text-xs flex items-center justify-center"></div>
              <p className="text-xs font-semibold">1 Bedroom²</p>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-5 h-5 text-white rounded-full bg-[#878FA3] text-xs flex items-center justify-center"></div>
              <p className="text-xs font-semibold">2 Bedroom²</p>
            </div>
          </div>
          {/* <div className="text-xs text-white rounded-full bg-[#00BED7] px-2 py-[3px] ">
            0 units
          </div> */}
        </div>
        <div className="relative flex flex-1 sm:bg-white rounded-2xl">
          <svg className="flex-1 p-2 sm:p-10" onMouseMove={handleMouseMove}>
            {wing === "West" ? (
              floor <= 21 ? (
                <WestWingFloorPlanLower
                  onMouseEnter={handleMouseEnter}
                  onMouseLeave={handleMouseLeave}
                  onClick={handleClick}
                />
              ) : (
                <WestWingFloorPlanUpper
                  onMouseEnter={handleMouseEnter}
                  onMouseLeave={handleMouseLeave}
                  onClick={handleClick}
                />
              )
            ) : (
              <EastWingFloorPlan
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
                onClick={handleClick}
              />
            )}
          </svg>

          {!isMobile && (
            <UnitPopup
              unit={hoveredUnit}
              type={type}
              show={showPopup}
              mousePos={mousePos}
            />
          )}
        </div>
      </div>
    </div>
  );
}

export default FloorPlanSidebar;