import React from 'react'

import Artwork from './Artwork'
import data from '../data/obras.json'

import Julieta from './models/obras/Julieta'
import Santiaga from './models/obras/Santiaga'
import Carolina from './models/obras/Carolina'
import Julian from './models/obras/Julian'
import Mateo from './models/obras/Mateo'
import Gaston from './models/obras/Gaston'
import Daniela from './models/obras/Daniela'
import Pedro from './models/obras/Pedro'
import DiegoGuido from './models/obras/DiegoGuido'
import JuanCruz from './models/obras/JuanCruz'
import Cordoba from './models/obras/Cordoba'
import Camila from './models/obras/Camila'
import Novello from './models/obras/Novello'
import Eduardo from './models/obras/Eduardo'

const models: (JSX.Element | null)[] = [
  <Daniela key="daniela" />, // <Daniela />,
  <JuanCruz key="juan_cruz" />, // Juan cruz
  <Cordoba key="cordoba" />, // Lucia cordoba
  <Camila key="camila" />, // Camila
  <Julieta key="julieta" />,
  <Novello key="novello" />, // Lucia Novello
  <Santiaga key="santiaga" />,
  <Carolina key="carolina" />,
  <Eduardo key="eduardo" />, // Edu
  <Julian key="julian" />,
  <Mateo key="mateo" />,
  <Gaston key="gaston" />,
  <Pedro key="pedro" />,
  <DiegoGuido key="diego_guido" />,
]

function ArtworkCollection(props: JSX.IntrinsicElements['group']) {
  return (
    <group {...props}>
      {data.map((obra, index) => {
        const model = models[index]
        let rotation = Math.PI / 8 + (index * Math.PI) / 8
        if (index > 6) rotation += Math.PI / 8
        return (
          <Artwork
            model={model}
            key={obra.obra_url}
            rotation={[0, rotation, 0]}
            position={[0, 0, -37.8632]}
            obraData={obra}
          />
        )
      })}
    </group>
  )
}

export default ArtworkCollection
