import { useEffect, useState } from 'react'
import { useSelectedAnimation, useSelectedEventSphere } from '../../../store/simulation/useSimulationStore';
import { usePlayButtonStore } from '../../../store/usePlayButtonStore';
import { useSceneContext } from '../../scene/sceneContext';
import HumanInstances from './instances/humanInstances'
import HumanUi from './instances/instance/humanUi';

function Human() {
    const { humanStore } = useSceneContext();
    const { getHumanById } = humanStore();
    const { selectedAnimation } = useSelectedAnimation();
    const { selectedEventSphere } = useSelectedEventSphere();
    const { isPlaying } = usePlayButtonStore();
    const [isVehicleSelected, setIsHumanSelected] = useState(false);

    useEffect(() => {
        if (selectedEventSphere) {
            const selectedHuman = getHumanById(selectedEventSphere.userData.modelUuid);
            if (selectedHuman &&
                selectedHuman.point.actions.some((action) =>
                    action.animationSequences.some((animation) =>
                        animation.animationUuid === selectedAnimation?.animationUuid && animation.animationType === 'animatedTravel'
                    )
                )) {
                setIsHumanSelected(true);
            } else {
                setIsHumanSelected(false);
            }
        }
    }, [getHumanById, selectedEventSphere, selectedAnimation])

    return (
        <>

            <HumanInstances />

            {isVehicleSelected && selectedEventSphere && !isPlaying &&
                <HumanUi />
            }

        </>
    )
}

export default Human