/*
auto-generated by: https://github.com/pmndrs/gltfjsx
*/
import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei/useGLTF'
import * as THREE from 'three'
import { useTrimesh } from '@react-three/cannon'

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

type GLTFResult = GLTF & {
  nodes: {
    collisions: THREE.Mesh
  }
  materials: {
    collision: THREE.MeshStandardMaterial
  }
}

export default function Model(props: JSX.IntrinsicElements['group']) {
  const group = useRef<THREE.Group>()
  const { nodes } = useGLTF('/model/plaza_collision.glb') as GLTFResult

  const material = new THREE.MeshBasicMaterial({
    wireframe: true,
    color: 0xffff00,
  })

  const geometry = nodes.collisions.geometry as THREE.BufferGeometry

  if (geometry.index === null) return null

  const vertices = geometry.attributes.position.array
  const indices = geometry.index.array

  // @ts-ignore
  const [ref] = useTrimesh(() => ({
    type: 'Static',
    position: [1.73, 1.23, 8.19],
    args: [vertices, indices],
  }))

  return (
    <group ref={group} {...props} dispose={null}>
      <mesh
        ref={ref}
        material={material}
        geometry={nodes.collisions.geometry}
        visible={false}
      />
    </group>
  )
}

useGLTF.preload('/model/collision_mesh.glb')