import { Html } from "@react-three/drei";
import { Object3D, Vector3 } from "three";
import AssetDetailsCard from "../../../components/ui/simulation/AssetDetailsCard";
import { useFrame, useThree } from "@react-three/fiber";
import { useState } from "react";

type VehicleContentUiProps = {
  vehicle: VehicleStatus;
};

const VehicleContentUi: React.FC<VehicleContentUiProps> = ({ vehicle }) => {
  const { scene } = useThree();
  const [htmlPosition, setHtmlPosition] = useState<[number, number, number]>([
    0, 0, 0,
  ]);
  const offset = new Vector3(0, 0.85, 0);
  useFrame(() => {
    const agvModel = scene.getObjectByProperty(
      "uuid",
      vehicle.modelUuid
    ) as Object3D;
    if (agvModel) {
      const worldPosition = offset.clone().applyMatrix4(agvModel.matrixWorld);
      setHtmlPosition([worldPosition.x, worldPosition.y, worldPosition.z]);
    }
  });

  return (
    <Html
      // data
      position={
        new Vector3(htmlPosition[0], vehicle.point.position[1], htmlPosition[2])
      }
      // class none
      // other
      zIndexRange={[1, 0]}
      prepend
      sprite
      center
      distanceFactor={20}
    >
      <AssetDetailsCard
        name={vehicle.modelName}
        status={vehicle.state}
        count={vehicle.currentLoad}
        totalCapacity={vehicle.point.action.loadCapacity}
        activeTime={vehicle.activeTime}
        
      />
    </Html>
  );
};

export default VehicleContentUi;
