import React, { useEffect, useState } from "react";
import VehicleInstance from "./instance/vehicleInstance";
import VehicleContentUi from "../../ui3d/VehicleContentUi";
import { useSceneContext } from "../../../scene/sceneContext";
import { useViewSceneStore } from "../../../../store/builder/store";
import PathCreator from "../pathCreator/pathCreator";
import VehicleInstance2 from "./instance/vehicleInstance2";

function VehicleInstances() {
  const { vehicleStore } = useSceneContext();
  const { vehicles } = vehicleStore();
  const [vehiclesData, setVehiclesData] = useState<VehicleStructure[]>([]);

  useEffect(() => {
    const updatedVehicles = vehicles.map((val) => ({
      vehicleId: val.modelUuid,
      position: val.position,
      rotation: val.rotation,
      startPoint: null,
      endPoint: null,
      selectedPointId: val.point.uuid,
    }));

    console.log("updatedVehicles: ", updatedVehicles);
    setVehiclesData(updatedVehicles);
  }, [vehicles]);

  return (
    <>
      {/* {vehicles.map((vehicle: VehicleStatus) => (
        <React.Fragment key={vehicle.modelUuid}>
          <VehicleInstance agvDetail={vehicle} />
          {viewSceneLabels && <VehicleContentUi vehicle={vehicle} />}
        </React.Fragment>
      ))} */}
      {vehiclesData.map((vehicle: VehicleStructure) => (
        <React.Fragment key={vehicle.vehicleId}>
          <VehicleInstance2
            vehicleData={vehicle}
            vehiclesData={vehiclesData}
            setVehiclesData={setVehiclesData}
          />
        </React.Fragment>
      ))}
    </>
  );
}

export default VehicleInstances;