Dwinzo_dev/app/src/components/ui/componets/DisplayZone.tsx

import React, { useEffect, useRef } from "react";
import { Widget } from "../../../store/useWidgetStore";

// 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<DisplayZoneProps> = ({
  zonesData,
  selectedZone,
  setSelectedZone,
}) => {
  // Ref for the container element
  const containerRef = useRef<HTMLDivElement | null>(null);

  // Example state for selectedOption and options (adjust based on your actual use case)
  const [selectedOption, setSelectedOption] = React.useState<string | null>(
    null
  );
  // console.log('setSelectedOption: ', setSelectedOption);
  const [options, setOptions] = React.useState<string[]>([]);
  // console.log('setOptions: ', setOptions);

  // Scroll to the selected option when it changes
  useEffect(() => {
    const container = containerRef.current;

    if (container && selectedOption) {
      // Handle scrolling to the selected option
      const index = options.findIndex((option) => {
        const formattedOption = formatOptionName(option);
        const selectedFormattedOption =
          selectedOption?.split("_")[1] || selectedOption;
        return formattedOption === selectedFormattedOption;
      });

      if (index !== -1) {
        const optionElement = container.children[index] as HTMLElement;
        if (optionElement) {
          optionElement.scrollIntoView({
            behavior: "smooth",
            block: "nearest",
            inline: "center",
          });
        }
      }
    }
  }, [selectedOption, options]);

  useEffect(() => {
    const container = containerRef.current;

    const handleWheel = (event: WheelEvent) => {
      event.preventDefault();
      if (container) {
        container.scrollBy({
          left: event.deltaY * 2, // Adjust the multiplier for faster scrolling
          behavior: "smooth",
        });
      }
    };

    let isDragging = false;
    let startX: number;
    let scrollLeft: number;

    const handleMouseDown = (event: MouseEvent) => {
      isDragging = true;
      startX = event.pageX - (container?.offsetLeft || 0);
      scrollLeft = container?.scrollLeft || 0;
    };

    const handleMouseMove = (event: MouseEvent) => {
      if (!isDragging || !container) return;
      event.preventDefault();
      const x = event.pageX - (container.offsetLeft || 0);
      const walk = (x - startX) * 2; // Adjust the multiplier for faster dragging
      container.scrollLeft = scrollLeft - walk;
    };

    const handleMouseUp = () => {
      isDragging = false;
    };

    const handleMouseLeave = () => {
      isDragging = false;
    };

    if (container) {
      container.addEventListener("wheel", handleWheel, { passive: false });
      container.addEventListener("mousedown", handleMouseDown);
      container.addEventListener("mousemove", handleMouseMove);
      container.addEventListener("mouseup", handleMouseUp);
      container.addEventListener("mouseleave", handleMouseLeave);
    }

    return () => {
      if (container) {
        container.removeEventListener("wheel", handleWheel);
        container.removeEventListener("mousedown", handleMouseDown);
        container.removeEventListener("mousemove", handleMouseMove);
        container.removeEventListener("mouseup", handleMouseUp);
        container.removeEventListener("mouseleave", handleMouseLeave);
      }
    };
  }, []);

  // Helper function to format option names (customize as needed)
  const formatOptionName = (option: string): string => {
    // Replace underscores with spaces and capitalize the first letter
    return option.replace(/_/g, " ").replace(/^\w/, (c) => c.toUpperCase());
  };

  return (
    <div
      ref={containerRef}
      className={`zoon-wrapper ${
        selectedZone.activeSides.includes("bottom") && "bottom"
      }`}
    >
      {Object.keys(zonesData).map((zoneName, index) => (
        <div
          key={index}
          className={`zone ${
            selectedZone.zoneName === zoneName ? "active" : ""
          }`}
          onClick={() => {
            setSelectedZone({
              zoneName,
              ...zonesData[zoneName],
            });
          }}
        >
          {zoneName}
        </div>
      ))}
    </div>
  );
};

export default DisplayZone;