261 lines
8.7 KiB
TypeScript
261 lines
8.7 KiB
TypeScript
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";
|
|
import { filterCurrentApartment } from "../../../calc/filterCurrentApartment";
|
|
import WestWingFloorLayout from "./WestWingFloorLayout";
|
|
|
|
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 [hoveredApartmentType, setHoveredApartmentType] = useState<
|
|
string | null
|
|
>(null);
|
|
const [apartments, setApartments] = useState<IAparmentRes[]>([]);
|
|
const { setModal } = useModal();
|
|
const descRef = useRef(null);
|
|
|
|
function handleMouseMove(e: MouseEvent) {
|
|
const y = e.clientY - 80;
|
|
const x = e.clientX - window.innerWidth / 2 - 335;
|
|
setMousePos([x, y]);
|
|
}
|
|
|
|
function handleOnApartmentClick(
|
|
event: React.MouseEvent<SVGSVGElement | SVGPathElement, MouseEvent>
|
|
) {
|
|
const apartmentType = event.currentTarget.dataset.type;
|
|
if (!apartmentType) return;
|
|
setHoveredApartmentType(apartmentType);
|
|
|
|
if (!hoveredApartmentType) return;
|
|
const apartment = filterCurrentApartment(apartments, hoveredApartmentType);
|
|
if (apartment) {
|
|
setModal(
|
|
<AboutComplexModal
|
|
apartment={apartment}
|
|
apartmentType={hoveredApartmentType}
|
|
/>
|
|
);
|
|
setIsDescVisible(false);
|
|
}
|
|
}
|
|
|
|
function handleOnMouseOut(): void {
|
|
setIsDescVisible(false);
|
|
}
|
|
|
|
function handleOnMouseOver(
|
|
event: React.MouseEvent<SVGSVGElement | SVGPathElement, MouseEvent>
|
|
): void {
|
|
const apartmentType = event.currentTarget.dataset.type;
|
|
if (!apartmentType) return;
|
|
const unitType = apartmentType.split("-")[0];
|
|
setHoveredApartmentType(apartmentType);
|
|
|
|
const _hoveredApartment = apartments.find(
|
|
(apart) => apart.Unit_Type === unitType
|
|
);
|
|
|
|
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(0, 1)}-${
|
|
currentFloor.floor
|
|
}0${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: "-",
|
|
};
|
|
}
|
|
);
|
|
|
|
setApartments([...defaultApartment, ...floorApartments]);
|
|
}, [currentFloor, currentFloor?.floor, currentFloor?.wing, floorApartments]);
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className="absolute z-[9999999]"
|
|
style={{ top: `${mousePos[1]}px`, left: `${mousePos[0]}px` }}
|
|
>
|
|
<ApartmentDescription
|
|
hoveredApartment={hoveredApartment}
|
|
descRef={descRef}
|
|
isVisible={isDescVisible}
|
|
apartmentDataType={hoveredApartmentType}
|
|
/>
|
|
</div>
|
|
<div
|
|
ref={descRef}
|
|
className="absolute w-full h-[calc(100vh-56px)] right-0 z-30 bg-[#F3F3F2] p-6 top-[56px] flex flex-col"
|
|
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>
|
|
|
|
<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 ? (
|
|
<svg
|
|
className="rotate-[135deg]"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="400"
|
|
height="700"
|
|
fill="none"
|
|
viewBox="0 0 204 600"
|
|
>
|
|
<WestWingLayout />
|
|
<WestWingHighlighting
|
|
handleOnApartmentClick={handleOnApartmentClick}
|
|
handleOnMouseOut={handleOnMouseOut}
|
|
handleOnMouseOver={handleOnMouseOver}
|
|
/>
|
|
</svg>
|
|
) : (
|
|
// <svg
|
|
// className="rotate-[135deg]"
|
|
// xmlns="http://www.w3.org/2000/svg"
|
|
// width="400"
|
|
// height="700"
|
|
// fill="none"
|
|
// viewBox="0 0 204 600"
|
|
// >
|
|
// <WestWingTopLevelsLayout />
|
|
// <WestWingTopLevelsHighlighting
|
|
// handleOnApartmentClick={handleOnApartmentClick}
|
|
// handleOnMouseOut={handleOnMouseOut}
|
|
// handleOnMouseOver={handleOnMouseOver}
|
|
// />
|
|
// </svg>
|
|
<>
|
|
<WestWingFloorLayout
|
|
handleMouseEnter={handleOnMouseOver}
|
|
handleMouseLeave={handleOnMouseOut}
|
|
handleClick={handleOnApartmentClick}
|
|
/>
|
|
</>
|
|
)
|
|
) : (
|
|
<svg
|
|
className="rotate-[135deg]"
|
|
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>
|
|
) : } */}
|
|
</svg>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default FloorSidebar;
|