/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import * as THREE from 'three'
import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei/useGLTF'

import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
import ObraAudio from '../../ObraAudio'

type GLTFResult = GLTF & {
  nodes: {
    dome_ground_mesh014: THREE.Mesh
    ['dome_ground_mesh.014_1']: THREE.Mesh
    ['dome_ground_mesh.014_2']: THREE.Mesh
    ['dome_ground_mesh.014_3']: THREE.Mesh
  }
  materials: {
    ['metal.001']: THREE.MeshStandardMaterial
    ['light.002']: THREE.MeshStandardMaterial
    ['julieta_caja.001']: THREE.MeshStandardMaterial
    ['marble.006']: THREE.MeshStandardMaterial
  }
}

export default function Model(props: JSX.IntrinsicElements['group']) {
  const group = useRef<THREE.Group>()
  const { nodes, materials } = useGLTF('/model/obras/julieta.glb') as GLTFResult
  return (
    <group ref={group} {...props} dispose={null}>
      <ObraAudio position={[0, 0, 0]} url="/audio/julieta.ogg" loop distance={1} />
      <mesh
        material={materials['metal.001']}
        geometry={nodes.dome_ground_mesh014.geometry}
      />
      <mesh
        material={materials['light.002']}
        geometry={nodes['dome_ground_mesh.014_1'].geometry}
      />
      <mesh
        material={materials['julieta_caja.001']}
        geometry={nodes['dome_ground_mesh.014_2'].geometry}
      />
      <mesh
        material={materials['marble.006']}
        geometry={nodes['dome_ground_mesh.014_3'].geometry}
      />
    </group>
  )
}

useGLTF.preload('/model/obras/julieta.glb')
