import { useLoader } from "@react-three/fiber";
import { Vector3 } from "three";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { clone } from "three/examples/jsm/utils/SkeletonUtils";

interface MultiGLTFInstancesProps {
  index: number;
  modelUrl: string;
  position: Vector3;
  rotation: Vector3;
  visibility?: boolean;
}

export const MultiGLTFInstances: React.FC<MultiGLTFInstancesProps> = ({
  index,
  modelUrl,
  position,
  rotation,
  visibility,
}) => {
  console.log("position: ", position);
  const originalGltf = useLoader(GLTFLoader, modelUrl, (loader) => {
    const draco = new DRACOLoader();
    draco.setDecoderPath(
      "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/"
    );
    loader.setDRACOLoader(draco);
  });
  const cloned = clone(originalGltf.scene);
  return (
    <>
      {visibility && (
        <primitive
          name={`rigged_arm`}
          key={index}
          object={cloned}
          position={position}
          scale={[1, 1, 1]}
          rotation={rotation}
        />
      )}
    </>
  );
};