import { useEffect, useRef, useState } from "react"; import FloorDescription from "./FloorDescription"; import { IDesctiptionFloor } from "../../types/descriptionFloor"; import SkygardenDescription from "./SkygardenDescription"; import FloorSidebar from "./FloorSidebar/FloorSidebar"; import SkygardenSidebar from "./SkygardenSidebar/SkygardenSidebar"; import useWingSidebar from "../../store/useWingSidebar"; import useModal from "../../store/useModal"; import WingFloorModal from "../modals/mobile/WingFloorModal"; import { laptopWidth, mobileWidht, descriptions, } from "../../consts/masterplan"; import { updateAccessToken } from "../../api/updateAccessToken"; import { IAparmentRes } from "../../types/apartmentsRes"; import useMasterplanFilters from "../../store/useMasterplanFilters"; import { initialRoveHomeCheckboxes } from "../../consts/initialMasterplanFilters"; import { pageInitial } from "../../consts/initialMasterplanFilters"; import { useDebounce } from "@uidotdev/usehooks"; import { getFilteredApartments } from "../../calc/getFilteredApartments"; import MasterplanLoaderModal from "../modals/MasterplanLoaderModal"; const skyGardenFloor = 22; const SequenceWing = () => { const [width, setWidth] = useState(0); const [top, setTop] = useState(0); const [left, setLeft] = useState(0); const leftWingRef = useRef(null); const { isSidebar, setIsSidebar } = useWingSidebar(); const [mousePos, setMousePos] = useState<[number, number]>([0, 0]); const [currentHoveredFloor, setHoverCurrentFloor] = useState(null); const [isLoading, setIsLoading] = useState(true); const [currentFloor, setCurrentFloor] = useState( null ); const [isWrapperHovered, setIsWrapperHovered] = useState(false); const [isSkygardenSidebar, setIsSkygardenSidebar] = useState(false); const [isFloorSidebar, setIsFloorSidebar] = useState(false); const { setModal } = useModal(); const [apartments, setApartments] = useState([]); const [currentHoveredApartments, setCurrentHoveredApartments] = useState< IAparmentRes[] >([]); const [selectedApartments, setSelectedApartments] = useState( [] ); const { apartmentTypeCheckboxes, switchers, multirangeSliders, viewCheckboxes, sortList, } = useMasterplanFilters(); const debouncedSliders = useDebounce(multirangeSliders, 300); function handleResize() { const screenWidth = window.innerWidth; const screenHeight = window.innerHeight; if (screenWidth > laptopWidth) { setWidth(screenWidth); setTop(screenWidth / 2 - screenHeight / 2); setLeft(0); } else { if (screenWidth > mobileWidht) { const _top = screenHeight / 4; setTop(_top); } else { const _top = screenHeight / 2.5; setTop(_top); } const _left = laptopWidth - screenWidth; const _width = screenWidth + _left * 2; setWidth(_width); setLeft(_left); } } const handleOnFloorMouseEnter = ( e: React.MouseEvent ) => { e.stopPropagation(); const id = e.currentTarget.dataset.id; if (!id) return; const _currentFloor = descriptions.find((desc) => desc.id === id); if (!_currentFloor) return; setHoverCurrentFloor(_currentFloor); const _currentHoveredApartments = apartments.filter((apartment) => { const wing = apartment.Unit_No.split("-")[0] === "E" ? "East Wing" : "West Wing"; return ( apartment.Floor === _currentFloor.floor && wing === _currentFloor.wing ); }); setIsWrapperHovered(true); setCurrentHoveredApartments(_currentHoveredApartments); }; const handleOnWingWrapperMouseEnter = ( e: React.MouseEvent ) => { (e as unknown as Event).stopPropagation(); setIsWrapperHovered(true); }; const handleOnWingWrapperMouseLeave = () => { setIsWrapperHovered(false); }; const handleOnFloorClick = () => { if (!currentHoveredFloor && !currentHoveredApartments) return; const screenWidth = window.innerWidth; setSelectedApartments(currentHoveredApartments); setCurrentFloor(currentHoveredFloor); if (screenWidth < laptopWidth) { setModal(); } else { setIsFloorSidebar(true); setIsSkygardenSidebar(false); setIsSidebar(true); } }; const handleOnSkygardenClick = () => { const screenWidth = window.innerWidth; if (screenWidth < laptopWidth) { setModal(); } else { setIsSkygardenSidebar(true); setIsFloorSidebar(false); setIsSidebar(true); } }; function handleMouseMove(e: MouseEvent) { const top = window.innerWidth / 2 - window.innerHeight / 2; setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]); } useEffect(() => { handleResize(); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); useEffect(() => { handleResize(); window.addEventListener("resize", handleResize); window.addEventListener("mousemove", handleMouseMove); return () => { window.removeEventListener("resize", handleResize); window.removeEventListener("mousemove", handleMouseMove); }; }, []); useEffect(() => { if (!isSidebar) { setIsFloorSidebar(false); setIsSkygardenSidebar(false); } }, [isSidebar]); useEffect(() => { const localStorageToken = `${localStorage.getItem("ACCESS_TOKEN")}`; const perPage = 1000; const getApartments = (token: string) => getFilteredApartments( token, setApartments, initialRoveHomeCheckboxes, apartmentTypeCheckboxes, debouncedSliders, switchers, viewCheckboxes, sortList, pageInitial, perPage ); setIsLoading(true); getApartments(localStorageToken) .then((res) => { console.log("first2", res); setIsLoading(false); }) .catch((error) => { const errorStatus = error.response.status; if (errorStatus === 401) { updateAccessToken() .then((token) => { if (token) { getApartments(token).then(() => { setIsLoading(false); }); } }) .catch((error) => { setIsLoading(false); console.log("first2"); console.error("error", error); }); } else { setIsLoading(false); console.log("first"); console.error("error", error); } }); }, [ setApartments, apartmentTypeCheckboxes, debouncedSliders, switchers, viewCheckboxes, sortList, ]); useEffect(() => { if (isLoading) { setModal(); } else { setModal(null); } }, [isLoading, setModal]); return (

); }; export default SequenceWing;