'use strict'
 
import React from 'react'
 
import { TheAr, TheArStyle } from 'the-ar'
 
class ExampleComponent extends React.PureComponent {
  render () {
    const s = this
    return (
      <div>
        <script src={TheAr.THREE_JS_URL}></script>
        <script src={TheAr.AR_JS_URL}></script>
        <TheArStyle/>
        <TheAr onReady={(context) => s.handleReady(context)}
               onDraw={(context) => s.handleDraw(context)}
        />
      </div>
 
    )
  }
 
  handleReady ({ THREE, scene, renderer }) {
    const s = this
    s.drawHandlers = []
    {
 
      const geometry = new THREE.CubeGeometry(1, 1, 1)
      const material = new THREE.MeshNormalMaterial({
        transparent: true,
        opacity: 0.5,
        side: THREE.DoubleSide
      })
      const mesh = new THREE.Mesh(geometry, material)
      mesh.position.y = geometry.parameters.height / 2
      scene.add(mesh)
    }
    {
      const geometry = new THREE.TorusKnotGeometry(0.3, 0.1, 64, 16)
      const material = new THREE.MeshNormalMaterial()
      const mesh = new THREE.Mesh(geometry, material)
      mesh.position.y = 0.5
      scene.add(mesh)
      s.drawHandlers.push((delta) => {
        mesh.rotation.x += Math.PI * delta
      })
    }
  }
 
  handleDraw ({ scene, renderer, delta }) {
    const s = this
    for (let handler of s.drawHandlers) {
      handler(delta)
    }
  }
 
}
 
export default ExampleComponent