import { useEffect, useState } from "react";
import { useVehicleStore } from "../../../store/simulation/useVehicleStore";
import { useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import VehicleInstances from "./instances/vehicleInstances";
import VehicleUI from "../spatialUI/vehicle/vehicleUI";

function Vehicles() {
    const { getVehicleById } = useVehicleStore();
    const { selectedEventSphere } = useSelectedEventSphere();
    const { isPlaying } = usePlayButtonStore();
    const [isVehicleSelected, setIsVehicleSelected] = useState(false);

    useEffect(() => {
        if (selectedEventSphere) {
            const selectedVehicle = getVehicleById(selectedEventSphere.userData.modelUuid);
            if (selectedVehicle) {
                setIsVehicleSelected(true);
            } else {
                setIsVehicleSelected(false);
            }
        }
    }, [getVehicleById, selectedEventSphere])

    return (
        <>

            <VehicleInstances />

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

        </>
    );
}

export default Vehicles;
