import React, { useEffect } from 'react';
import { useEventsStore } from '../../store/simulation/useEventsStore';
import { useProductStore } from '../../store/simulation/useProductStore';
import Vehicles from './vehicle/vehicles';
import Points from './events/points/points';
import Conveyor from './conveyor/conveyor';
import RoboticArm from './roboticArm/roboticArm';
import Materials from './materials/materials';
import Machine from './machine/machine';
import StorageUnit from './storageUnit/storageUnit';
import Simulator from './simulator/simulator';
import Products from './products/products';
import Trigger from './triggers/trigger';
import useModuleStore from '../../store/useModuleStore';

function Simulation() {
    const { activeModule } = useModuleStore();
    const { events } = useEventsStore();
    const { products } = useProductStore();

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

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

    return (
        <>

            <Products />

            {activeModule === 'simulation' &&

                <>

                    <Points />

                    <Materials />

                    <Trigger />

                    <Conveyor />

                    <Vehicles />

                    <RoboticArm />

                    <Machine />

                    <StorageUnit />

                    <Simulator />

                </>

            }

        </>
    );
}

export default Simulation;
