import { useEffect } from 'react'
import { usePlayButtonStore, useResetButtonStore } from '../../../store/ui/usePlayButtonStore';
import { useSceneContext } from '../../scene/sceneContext';
import MaterialInstances from './instances/materialInstances'
// import MaterialCollisionDetector from './collisionDetection/materialCollitionDetector';

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

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

    return (
        <>

            {isPlaying &&

                <MaterialInstances />

            }

            {/* <MaterialCollisionDetector /> */}

        </>
    )
}

export default Materials