import { useEffect } from 'react'
import MaterialInstances from './instances/materialInstances'
import { usePlayButtonStore, useResetButtonStore } from '../../../store/usePlayButtonStore';
import { useMaterialStore } from '../../../store/simulation/useMaterialStore';
import MaterialCollisionDetector from './collisionDetection/materialCollitionDetector';

function Materials() {
    const { clearMaterials } = useMaterialStore();
    const { isPlaying } = usePlayButtonStore();
    const { isReset } = useResetButtonStore();

    useEffect(() => {
        if (isReset || !isPlaying) {
            clearMaterials();
        }
    }, [isReset, isPlaying]);

    return (
        <>

            {isPlaying &&

                <MaterialInstances />

            }

            <MaterialCollisionDetector />

        </>
    )
}

export default Materials