import { useState, useEffect, useRef, useMemo } from "react";
import {
  useSelectedActionSphere,
  useSelectedPath,
  useSimulationStates,
} from "../../store/store";
import * as THREE from "three";
import Behaviour from "./behaviour/behaviour";
import PathCreation from "./path/pathCreation";
import PathConnector from "./path/pathConnector";
import useModuleStore from "../../store/useModuleStore";
import ProcessContainer from "./process/processContainer";
import Agv from "../builder/agv/agv";

function Simulation() {
  const { activeModule } = useModuleStore();
  const pathsGroupRef = useRef() as React.MutableRefObject<THREE.Group>;
  const { simulationStates, setSimulationStates } = useSimulationStates();
  const [processes, setProcesses] = useState<any[]>([]);
  const agvRef = useRef([]);
  const MaterialRef = useRef([]);

  return (
    <>
      <Behaviour />
      {activeModule === "simulation" && (
        <>
          <PathCreation pathsGroupRef={pathsGroupRef} />
          <PathConnector pathsGroupRef={pathsGroupRef} />
          <ProcessContainer
            processes={processes}
            setProcesses={setProcesses}
            agvRef={agvRef}
            MaterialRef={MaterialRef}
          />
          <Agv
            processes={processes}
            agvRef={agvRef}
            MaterialRef={MaterialRef}
          />
        </>
      )}
    </>
  );
}

export default Simulation;