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

function Vehicles() {
    const { vehicles } = useVehicleStore();
    const { selectedEventSphere } = useSelectedEventSphere();
    const { selectedEventData } = useSelectedEventData();
    const { isPlaying } = usePlayButtonStore();

    useEffect(() => {
        // console.log('vehicles: ', vehicles);
    }, [vehicles])

    return (
        <>

            <VehicleInstances />

            {selectedEventSphere && selectedEventData?.data.type === "vehicle" && !isPlaying &&
                < VehicleUI />
            }

        </>
    );
}

export default Vehicles;