import React, { useEffect, useRef, useState, useCallback } from "react"; import { Widget } from "../../../store/useWidgetStore"; import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons"; // Define the type for `Side` type Side = "top" | "bottom" | "left" | "right"; interface DisplayZoneProps { zonesData: { [key: string]: { activeSides: Side[]; panelOrder: Side[]; lockedPanels: Side[]; widgets: Widget[]; }; }; selectedZone: { zoneName: string; activeSides: Side[]; panelOrder: Side[]; lockedPanels: Side[]; widgets: { id: string; type: string; title: string; panel: Side; data: any; }[]; }; setSelectedZone: React.Dispatch< React.SetStateAction<{ zoneName: string; activeSides: Side[]; panelOrder: Side[]; lockedPanels: Side[]; 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; console.log("isOverflowing:", isOverflowing); console.log("canScrollLeft:", canScrollLeft); console.log("canScrollRight:", canScrollRight); 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", }); } }; return (
{/* Left Arrow */} {showLeftArrow && ( )} {/* Zones Wrapper */}
{Object.keys(zonesData).map((zoneName, index) => (
{ console.log("zoneName: ", zoneName); setSelectedZone({ zoneName, activeSides: zonesData[zoneName].activeSides || [], panelOrder: zonesData[zoneName].panelOrder || [], lockedPanels: zonesData[zoneName].lockedPanels || [], widgets: zonesData[zoneName].widgets || [], }); }} > {zoneName}
))}
{/* Right Arrow */} {showRightArrow && ( )}
); }; export default DisplayZone;