import React, { useEffect, useState, useRef } from "react";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import Panel from "./Panel";
import AddButtons from "./AddButtons";
import { useSelectedZoneStore } from "../../../store/useZoneStore";
import DisplayZone from "./DisplayZone";
import Scene from "../../../modules/scene/scene";

type Side = "top" | "bottom" | "left" | "right";

interface Widget {
  id: string;
  type: string;
  title: string;
  panel: Side;
  data: any;
}

const RealTimeVisulization: React.FC = () => {
  const [hiddenPanels, setHiddenPanels] = React.useState<Side[]>([]);
  const containerRef = useRef<HTMLDivElement>(null);
  const [zonesData, setZonesData] = useState<{
    [key: string]: {
      activeSides: Side[];
      panelOrder: Side[];
      lockedPanels: Side[];
      widgets: Widget[];
    };
  }>({
    "Manufacturing unit": {
      activeSides: [],
      panelOrder: [],
      lockedPanels: [],
      widgets: [],
    },
    "Assembly unit": {
      activeSides: [],
      panelOrder: [],
      lockedPanels: [],
      widgets: [],
    },
    "Packing unit": {
      activeSides: [],
      panelOrder: [],
      lockedPanels: [],
      widgets: [],
    },
    Warehouse: {
      activeSides: [],
      panelOrder: [],
      lockedPanels: [],
      widgets: [],
    },
    Inventory: {
      activeSides: [],
      panelOrder: [],
      lockedPanels: [],
      widgets: [],
    },
  });

  const { isPlaying } = usePlayButtonStore();

  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
  useEffect(() => {
    setZonesData((prev) => ({
      ...prev,
      [selectedZone.zoneName]: selectedZone,
    }));
  }, [selectedZone]);

  return (
    <div
      ref={containerRef}
      id="real-time-vis-canvas"
      className={`realTime-viz canvas ${!isPlaying ? "playActiveFalse" : ""}`}
      style={{
        height: isPlaying ? "100vh" : "",
        left: isPlaying ? "0%" : "",
      }}
    >
      <div
        className="scene-container"
        style={{ height: "100%", width: "100%" }}
      >
        <Scene />
      </div>
      {!isPlaying && (
        <AddButtons
          hiddenPanels={hiddenPanels}
          setHiddenPanels={setHiddenPanels}
          selectedZone={selectedZone}
          setSelectedZone={setSelectedZone}
        />
      )}
      <DisplayZone
        zonesData={zonesData}
        selectedZone={selectedZone}
        setSelectedZone={setSelectedZone}
      />
      <Panel
        selectedZone={selectedZone}
        hiddenPanels={hiddenPanels}
        setSelectedZone={setSelectedZone}
      />{" "}
    </div>
  );
};

export default RealTimeVisulization;