import { Vector3 } from 'three'
import OrbitControls from 'three-orbitcontrols'

import { appendRenderer, render, camera, renderer } from './renderer'

import { toArray } from '../util'

import * as modal from './modal'
import * as cloud from './cloud'
import * as face from './face'

const controls = new OrbitControls(camera, renderer.domElement)
controls.maxDistance = camera.far / 2
controls.enableDamping = true
controls.dampingFactor = 1 / 8
controls.rotateSpeed = 1 / 4
controls.zoomSpeed = 1
controls.keyPanSpeed = 1 / 2

function init() {
  build()
  bind()
  animate()
}

function build() {
  appendRenderer()
  cloud.init()
  face.init()
}

function bind() {
  document.querySelector('.slogan').addEventListener('click', modal.close)
  toArray(document.querySelectorAll('.aboutLink')).forEach(el => {
    el.addEventListener('click', modal.toggle)
  })
  document.querySelector('.about .inner').addEventListener('click', e => e.stopPropagation())
  document.querySelector('.about').addEventListener('click', modal.close)
  document.querySelector('.close').addEventListener('click', modal.close)
}

function animate() {
  requestAnimationFrame(animate)

  // camera.position.z += -0.0025
  // camera.rotation.y += 0.00001

  controls.update()
  cloud.update()
  // face.update()

  let cameraTarget = new Vector3(0, 0, 0)
  camera.lookAt(cameraTarget)

  render()
}

document.addEventListener('DOMContentLoaded', init)