import React, { useState } from 'react';
import * as THREE from 'three';
import PathCreator from './path/pathCreator';
import PathFlow from './path/pathFlow';

type PathPoint = {
    position: THREE.Vector3;
    rotation: THREE.Quaternion;
    uuid: string;
};

function Simulation() {
    const [simulationStates, setSimulationStates] = useState<{ position: THREE.Vector3; rotation: THREE.Quaternion; uuid: string }[][]>([]);
    const [connections, setConnections] = useState<{ start: PathPoint; end: PathPoint }[]>([]);

    return (
        <>
            <PathCreator simulationStates={simulationStates} setSimulationStates={setSimulationStates} connections={connections} setConnections={setConnections} />
            {simulationStates.map((path, index) => (
                <PathFlow key={index} path={path} connections={connections} />
            ))}
        </>
    );
}

export default Simulation;