import { useState, useEffect, useRef, useMemo } from "react";
import {
  useSelectedActionSphere,
  useSelectedPath,
  useSimulationPaths,
} 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 { simulationPaths, setSimulationPaths } = useSimulationPaths();
  const [processes, setProcesses] = useState([]);

  useEffect(() => {
    console.log('simulationPaths: ', simulationPaths);
  }, [simulationPaths]);

  // useEffect(() => {
  //     if (selectedActionSphere) {
  //         console.log('selectedActionSphere: ', selectedActionSphere);
  //     }
  // }, [selectedActionSphere]);

  // useEffect(() => {
  //     if (selectedPath) {
  //         console.log('selectedPath: ', selectedPath);
  //     }
  // }, [selectedPath]);

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

export default Simulation;