import React, { useRef } from "react";
import { useGLTF, useAnimations } from "@react-three/drei";
import {
  Object3D,
  Group,
  SkinnedMesh,
  Bone,
  Material,
  AnimationClip,
} from "three";
import { ThreeElements } from "@react-three/fiber";

type GLTFResult = {
  nodes: {
    Pepe: SkinnedMesh;
    Bone: Bone;
  };
  materials: {
    OneMeshPepe: Material;
  };
  animations: AnimationClip[];
};

export function PepeModel(props: ThreeElements["group"]) {
  const group = useRef<Group>(null);
  const { nodes, materials, animations } = useGLTF(
    "/pepe.glb"
  ) as unknown as GLTFResult;
  const { actions } = useAnimations(animations, group);

  return (
    <group ref={group} {...props} dispose={null}>
      <group name="Scene">
        <group name="Armature">
          <skinnedMesh
            name="Pepe"
            geometry={nodes.Pepe.geometry}
            material={materials.OneMeshPepe}
            skeleton={nodes.Pepe.skeleton}
          />
          <primitive object={nodes.Bone} />
        </group>
      </group>
    </group>
  );
}

useGLTF.preload("/pepe.glb");