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

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

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

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

    return (
        <>

            <VehicleInstances />

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

        </>
    );
}

export default Vehicles;