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'

let interacted = false

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)
  if (document.querySelector('.about')) {
    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)
  }
  renderer.domElement.addEventListener('wheel', () => {
    interacted = true
  }, false)
  renderer.domElement.addEventListener('mousedown', () => {
    interacted = true
  }, false)
  renderer.domElement.addEventListener('touchstart', () => {
    interacted = true
  }, false)
  camera.position.z = 1.17
}

function animate() {
  requestAnimationFrame(animate)

  // camera.position.z += -0.0025
  // camera.rotation.y += 0.00001
  if (!interacted && camera.position.z < 2.28) {
    camera.position.z += 0.0025
  }

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

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

  render()
}

document.addEventListener('DOMContentLoaded', init)