import { useEffect } from 'react';
import { useActionHandler } from '../actions/useActionHandler';
import { usePlayButtonStore, useResetButtonStore } from '../../../store/usePlayButtonStore';
import { determineExecutionOrder } from './functions/determineExecutionOrder';
import { useProductContext } from '../products/productContext';
import { useSceneContext } from '../../scene/sceneContext';
import SimulationHandler from './SimulationHandler';

function Simulator() {
    const { selectedProductStore } = useProductContext();
    const { productStore } = useSceneContext();
    const { products, getProductById } = productStore();
    const { handleAction } = useActionHandler();
    const { selectedProduct } = selectedProductStore();
    const { isPlaying } = usePlayButtonStore();
    const { isReset } = useResetButtonStore();

    useEffect(() => {
        if (!isPlaying || isReset || !selectedProduct.productUuid) return;

        const product = getProductById(selectedProduct.productUuid);
        if (!product) return;

        const executionOrder = determineExecutionOrder([product]);

        executionOrder.forEach(action => {
            handleAction(action);
        });
    }, [products, isPlaying, isReset, selectedProduct]);


    return (

        <>

            {/* <simulationHandler/> */}
            <SimulationHandler />

        </>

    );
}

export default Simulator;