import * as THREE from "three";
import { Canvas } from "@react-three/fiber";
import { useLoader,useFrame } from "@react-three/fiber";
import React, { memo, Suspense } from "react";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { useGLTF } from "@react-three/drei";

const Mesh = (props) => {
  const model = useGLTF(props.path);
  console.log(model);

  let mixer = new THREE.AnimationMixer(model.scene);
  model.animations.forEach((clip)=>{
    const action = mixer.clipAction(clip);
    action.play();
  })

  useFrame((scene,delta)=>{
    mixer?.update(delta)
  })

  return (
    <primitive object={model.scene} scale={2}/>
  );
};

function Model(props) {
  return (
    <Suspense fallback={null}>
      <Mesh
        {...props}
        path={require(`@/assets/gltf/animated_robot_sdc.glb`)}
      />
    </Suspense>
  );
}

export default memo(Model)

useGLTF.preload(require(`@/assets/gltf/animated_robot_sdc.glb`));