import React, { useEffect, useRef, useState, useCallback } from "react"; import { Widget } from "../../../store/useWidgetStore"; import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons"; import { InfoIcon } from "../../icons/ExportCommonIcons"; import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore"; import { getSelect2dZoneData } from "../../../services/realTimeVisulization/zoneData/getSelect2dZoneData"; import { getFloatingZoneData } from "../../../services/realTimeVisulization/zoneData/getFloatingData"; // Define the type for `Side` type Side = "top" | "bottom" | "left" | "right"; interface DisplayZoneProps { zonesData: { [key: string]: { activeSides: Side[]; panelOrder: Side[]; lockedPanels: Side[]; widgets: Widget[]; zoneId: string; zoneViewPortTarget: number[]; zoneViewPortPosition: number[]; }; }; selectedZone: { zoneName: string; activeSides: Side[]; panelOrder: Side[]; lockedPanels: Side[]; zoneId: string; zoneViewPortTarget: number[]; zoneViewPortPosition: number[]; widgets: { id: string; type: string; title: string; panel: Side; data: any; }[]; }; setSelectedZone: React.Dispatch< React.SetStateAction<{ zoneName: string; activeSides: Side[]; panelOrder: Side[]; lockedPanels: Side[]; zoneId: string; zoneViewPortTarget: number[]; zoneViewPortPosition: number[]; widgets: { id: string; type: string; title: string; panel: Side; data: any; }[]; }> >; } const DisplayZone: React.FC = ({ zonesData, selectedZone, setSelectedZone, }) => { // Ref for the container element const containerRef = useRef(null); // State to track overflow visibility const [showLeftArrow, setShowLeftArrow] = useState(false); const [showRightArrow, setShowRightArrow] = useState(false); // Function to calculate overflow state const updateOverflowState = useCallback(() => { const container = containerRef.current; if (container) { const isOverflowing = container.scrollWidth > container.clientWidth; const canScrollLeft = container.scrollLeft > 0; const canScrollRight = container.scrollLeft + container.clientWidth < container.scrollWidth; setShowLeftArrow(isOverflowing && canScrollLeft); setShowRightArrow(isOverflowing && canScrollRight); } }, []); useEffect(() => { const container = containerRef.current; if (container) { // Initial calculation after the DOM has been rendered const handleInitialRender = () => { requestAnimationFrame(updateOverflowState); }; handleInitialRender(); // Update on window resize or scroll const handleResize = () => updateOverflowState(); const handleScroll = () => updateOverflowState(); // Add mouse wheel listener for horizontal scrolling const handleWheel = (event: WheelEvent) => { event.preventDefault(); // Prevent default vertical scrolling if (container) { container.scrollBy({ left: event.deltaY * 2, // Translate vertical scroll to horizontal scroll behavior: "smooth", }); } }; container.addEventListener("scroll", handleScroll); window.addEventListener("resize", handleResize); container.addEventListener("wheel", handleWheel, { passive: false }); return () => { container.removeEventListener("scroll", handleScroll); window.removeEventListener("resize", handleResize); container.removeEventListener("wheel", handleWheel); }; } }, [updateOverflowState]); // Handle scrolling with navigation arrows const handleScrollLeft = () => { const container = containerRef.current; if (container) { container.scrollBy({ left: -200, // Scroll left by 200px behavior: "smooth", }); } }; const handleScrollRight = () => { const container = containerRef.current; if (container) { container.scrollBy({ left: 200, // Scroll right by 200px behavior: "smooth", }); } }; async function handleSelect2dZoneData(zoneId: string, zoneName: string) { try { if (selectedZone?.zoneId === zoneId) { console.log("Zone is already selected:", zoneName); return; } const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0]; // Fetch data from backend let response = await getSelect2dZoneData(zoneId, organization); let res = await getFloatingZoneData(zoneId, organization); // Set the selected zone in the store useDroppedObjectsStore.getState().setZone(zoneName, zoneId); if (Array.isArray(res)) { res.forEach((val) => { useDroppedObjectsStore.getState().addObject(zoneName, val); }); } // Update selected zone state setSelectedZone({ zoneName, activeSides: response.activeSides || [], panelOrder: response.panelOrder || [], lockedPanels: response.lockedPanels || [], widgets: response.widgets || [], zoneId: zoneId, zoneViewPortTarget: response.viewPortCenter || {}, zoneViewPortPosition: response.viewPortposition || {}, }); } catch (error) { console.log('error: ', error); } } return (
{/* Left Arrow */} {showLeftArrow && ( )} {/* Zones Wrapper */} {Object.keys(zonesData).length !== 0 ? (
{Object.keys(zonesData).map((zoneName, index) => (
{ handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName) }} > {zoneName}
))}
) : (
No zones? Create one!
)} {/* Right Arrow */} {showRightArrow && ( )}
); }; export default DisplayZone;