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"; 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 [currentFloor, setCurrentFloor] = useState( null ); const [isWrapperHovered, setIsWrapperHovered] = useState(false); const [isSkygardenSidebar, setIsSkygardenSidebar] = useState(false); const [isFloorSidebar, setIsFloorSidebar] = useState(false); const { setModal } = useModal(); 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); setIsWrapperHovered(true); }; const handleOnWingWrapperMouseEnter = ( e: React.MouseEvent ) => { (e as unknown as Event).stopPropagation(); setIsWrapperHovered(true); }; const handleOnWingWrapperMouseLeave = () => { setIsWrapperHovered(false); }; const handleOnFloorClick = () => { if (!currentHoveredFloor) return; const screenWidth = window.innerWidth; 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]); return (

); }; export default SequenceWing;