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';

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 />
                </>
            )}
        </>
    );
}

export default Simulation;