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

import { useState, useEffect, useRef } from "react";
import { IDesctiptionFloor } from "../../../types/descriptionFloor";
import ApartmentDescription from "./ApartmentDescription";
import EastWingHighlighting from "./EastWingHighlighting";
import EastWingLayout from "./EastWingLayout";
import WestWingHighlighting from "./WestWingHighlighting";
import WestWingLayout from "./WestWingLayout";
import useModal from "../../../store/useModal";
import AboutComplexModal from "../../modals/AboutComplexModal";
import { IAparmentRes } from "../../../types/apartmentsRes";
import WestWingTopLevelsLayout from "./WestWingTopLevelsLayout";
import WestWingTopLevelsHighlighting from "./WestWingTopLevelsHighlighting";
import { apartmentsWithoutVirtualTour } from "../../../consts/apartmentsWithoutVirtualTour";

interface IFloorSidebarProps {
  currentFloor: IDesctiptionFloor | null;
  onMouseEnter: () => void;
  floorApartments: IAparmentRes[];
}

const FloorSidebar = ({
  currentFloor,
  onMouseEnter,
  floorApartments,
}: IFloorSidebarProps) => {
  const [mousePos, setMousePos] = useState<number[]>([0, 0]);
  const [isDescVisible, setIsDescVisible] = useState(false);
  const [hoveredApartment, setHoveredApartment] = useState<IAparmentRes | null>(
    null
  );
  const [defaultApartments, setDefaultApartments] = useState<IAparmentRes[]>(
    []
  );
  const [is3DTourAvailable] = useState(true);
  const { setModal } = useModal();
  const descRef = useRef(null);

  function handleMouseMove(e: MouseEvent) {
    const y = e.clientY - 175;
    const x = e.clientX - window.innerWidth / 2 - 50;

    setMousePos([x, y]);
  }

  function handleOnApartmentClick(
    event: React.MouseEvent<SVGSVGElement, MouseEvent>
  ) {
    const apartmentType = event.currentTarget.dataset.type;
    const apartment = defaultApartments.find(
      (aprt) => aprt.Unit_Type === apartmentType
    );
    if (apartment) {
      setModal(<AboutComplexModal apartment={apartment} />);
      setIsDescVisible(false);
    }
  }

  function handleOnMouseOut(): void {
    setIsDescVisible(false);
  }

  function handleOnMouseOver(
    event: React.MouseEvent<SVGSVGElement, MouseEvent>
  ): void {
    const apartmentType = event.currentTarget.dataset.type;
    const _hoveredApartment = defaultApartments.find(
      (apart) => apart.Unit_Type === apartmentType
    );
    if (_hoveredApartment) {
      setHoveredApartment(_hoveredApartment);
    } else {
      setHoveredApartment(null);
    }

    setIsDescVisible(true);
  }

  useEffect(() => {
    window.addEventListener("mousemove", handleMouseMove);
    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);

  useEffect(() => {
    if (!currentFloor) return;
    const _defaultApartment: IAparmentRes[] = apartmentsWithoutVirtualTour.map(
      (aprt, index) => {
        const unitNo = `${currentFloor?.wing.slice(1)}-${index}`;
        return {
          id: unitNo,
          Floor: currentFloor.floor,
          Property_Status: "Available",
          Unit_Type: aprt.type,
          Project_Name: "Rove Home Marasi Drive",
          Suite_Area_Sqft: 0,
          Balcony_Area_Sqft: 0,
          No_Of_Bedrooms: 1,
          Unit_No: unitNo,
          Total_Area_Sqft: 0,
          No_of_Bathrooms: 0,
          Property_Name: "-",
          Unit_View: "-",
        };
      }
    );

    setDefaultApartments([..._defaultApartment, ...floorApartments]);

    return () => {};
  }, [currentFloor, currentFloor?.floor, currentFloor?.wing, floorApartments]);

  return (
    <>
      <div
        className="absolute z-[99999] w-fit h-fit top-0 left-0"
        style={{ top: `${mousePos[1]}px`, left: `${mousePos[0]}px` }}
      >
        <ApartmentDescription
          hoveredApartment={hoveredApartment}
          descRef={descRef}
          isVisible={isDescVisible}
          is3DTourAvailable={is3DTourAvailable}
        />
      </div>
      <div
        ref={descRef}
        className="absolute h-full right-0 w-full z-30 bg-[#F3F3F2] p-6 flex flex-col top-[56px] "
        onMouseOver={onMouseEnter}
      >
        <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>
          <div className="bg-[#00BED7] text-white text-s px-2 py-[3px] rounded-3xl flex h-fit">
            <div className="leading-5">{floorApartments.length} units</div>
          </div>
        </div>
        <div className="px-4 py-[18px] bg-white flex gap-6 text-[#73787C] font-semibold text-caption-m rounded-2xl mb-2">
          <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="px-10 bg-white flex gap-6 font-semibold text-caption-m rounded-2xl justify-center items-center flex-1 py-4">
          {currentFloor?.wing === "West Wing" ? (
            currentFloor && currentFloor.floor <= 21 ? (
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="204"
                height="588"
                fill="none"
                viewBox="0 0 204 588"
              >
                <WestWingLayout />
                <WestWingHighlighting
                  handleOnApartmentClick={handleOnApartmentClick}
                  handleOnMouseOut={handleOnMouseOut}
                  handleOnMouseOver={handleOnMouseOver}
                />
              </svg>
            ) : (
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="205"
                height="588"
                fill="none"
                viewBox="0 0 205 588"
              >
                <WestWingTopLevelsLayout />
                <WestWingTopLevelsHighlighting
                  handleOnApartmentClick={handleOnApartmentClick}
                  handleOnMouseOut={handleOnMouseOut}
                  handleOnMouseOver={handleOnMouseOver}
                />
              </svg>
            )
          ) : (
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              width="672"
              height="280"
              viewBox="0 0 672 280"
            >
              <EastWingLayout />
              <EastWingHighlighting
                handleOnApartmentClick={handleOnApartmentClick}
                handleOnMouseOut={handleOnMouseOut}
                handleOnMouseOver={handleOnMouseOver}
              />
            </svg>
          )}
          {/* {currentFloor?.wing === "West Wing" ? (
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              width="672"
              height="280"
              viewBox="0 0 672 280"
            >
              <FloorWestWingLayout />
              <FloorWestWingHighlighting
                handleOnApartmentClick={handleOnApartmentClick}
                handleOnMouseOut={handleOnMouseOut}
                handleOnMouseOver={handleOnMouseOver}
              />
            </svg>
          ) : } */}
        </div>
      </div>
    </>
  );
};

export default FloorSidebar;