/*
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 { Text } from '@react-three/drei'

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

type GLTFResult = GLTF & {
  nodes: {
    Sphere001: THREE.Mesh
    ['Sphere.001_1']: THREE.Mesh
  }
  materials: {
    ['sphere_inner.001']: THREE.MeshStandardMaterial
    ['sphere_outer.001']: THREE.MeshStandardMaterial
  }
}

const text = [
  `Porque nada nos llevamos y sólo una cosa dejamos, lo mucho que hemos amado. Por eso
a pesar de la ausencia tu amor me sigue abrazando y yo te sigo amando como si mis ojos
te vieran`,
  `Cómo van las cosas por allá? acá está todo muy raro, hace mucho que estamos
encerrados, vos te estarías volviendo loca. Se que aunque no estas acá conmigo
físicamente, estas. Te siento y te amo. Sé que estás acá.`,
  `Mamá, te extraño mucho, te sueño. Me gustaría que estés acá, pero entiendo que tu cuerpo
ya no podía más. Sé que estarías contenta de saber qué armamos un estudio en casa y
siempre tiene las flores que te gustan. Espero que te hayas encontrado con papá y estés
feliz.`,
]

export default function Model(props: JSX.IntrinsicElements['group']) {
  const group = useRef<THREE.Group>()
  const { nodes, materials } = useGLTF('/model/obras/carolina.glb') as GLTFResult
  return (
    <group ref={group} {...props} dispose={null}>
      <group rotation={[0, -0.7, 0]} position={[0, 3.5, 0]}>
        <Text
          position={[0, 0, -6]}
          color="white"
          rotation={[0.3, 0, 0]}
          fontSize={0.2}
          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
          anchorX="center"
          anchorY="middle"
        >
          {text[0]}
        </Text>
      </group>
      <group rotation={[0, 0.8, 0]} position={[0, 3.5, 0]}>
        <Text
          rotation={[0.3, 0, 0]}
          position={[0, 0, -6]}
          color="white"
          fontSize={0.17}
          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
          anchorX="center"
          anchorY="middle"
        >
          {text[1]}
        </Text>
      </group>
      <group rotation={[0, 2.6, 0]} position={[0, 4, 0]}>
        <Text
          position={[0, 0, -7]}
          rotation={[0.3, 0, 0]}
          color="white"
          fontSize={0.17}
          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
          anchorX="center"
          anchorY="middle"
        >
          {text[2]}
        </Text>
      </group>
      <group>
        <mesh
          material={materials['sphere_inner.001']}
          geometry={nodes.Sphere001.geometry}
        />
        <mesh
          material={materials['sphere_outer.001']}
          geometry={nodes['Sphere.001_1'].geometry}
        />
      </group>
    </group>
  )
}

useGLTF.preload('/mode/obras/carolina.glb')
