const BaseLayer = mars3d.layer.BaseLayer
const THREE = window.THREE

// 与THREE.js集成
class ThreeLayer extends BaseLayer {
  constructor(options = {}) {
    super(options)

    this._pointerEvents = this.options.pointerEvents
  }

  _showHook(show) {
    if (show) {
      this._threejsContainer.style.visibility = "visible"
    } else {
      this._threejsContainer.style.visibility = "hidden"
    }
  }

  /**
   * 对象添加到地图前创建一些对象的钩子方法，
   * 只会调用一次
   * @return {void}  无
   * @private
   */
  _mountedHook() {
    if (!THREE) {
      throw new Error("请引入 three.js 库 ")
    }

    const scene = this._map.scene

    const threeContainer = mars3d.DomUtil.create("div", "mars3d-threejs")
    threeContainer.style.position = "absolute"
    threeContainer.style.top = "0px"
    threeContainer.style.left = "0px"
    threeContainer.style.width = scene.canvas.clientWidth + "px"
    threeContainer.style.height = scene.canvas.clientHeight + "px"
    threeContainer.style.pointerEvents = this._pointerEvents ? "auto" : "none" // auto时可以交互，但是没法放大地球， none 没法交互
    this._container = threeContainer

    const fov = 45
    const aspect = scene.canvas.clientWidth / scene.canvas.clientHeight
    const near = 1
    const far = 10 * 1000 * 1000 // needs to be far to support Cesium's world-scale rendering

    this.scene = new THREE.Scene()
    this.camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
    this.renderer = new THREE.WebGLRenderer({ alpha: true })
    threeContainer.appendChild(this.renderer.domElement)
  }

  /**
   * 对象添加到地图上的创建钩子方法，
   * 每次add时都会调用
   * @return {void}  无
   * @private
   */
  _addedHook() {
    if (this._container) {
      this._map.container.appendChild(this._container)
    }

    this._map.viewer.useDefaultRenderLoop = false // 关闭自动渲染

    // eslint-disable-next-line
    const that = this
    ;(function frame() {
      // animateFrame: requestAnimationFrame事件句柄，用来清除操作
      that._animateFrame = window.requestAnimationFrame(frame)
      that.update() // 按帧率执行
    })()
  }

  /**
   * 对象从地图上移除的创建钩子方法，
   * 每次remove时都会调用
   * @return {void}  无
   * @private
   */
  _removedHook() {
    window.cancelAnimationFrame(this._animateFrame)
    delete this._animateFrame

    this._map.viewer.useDefaultRenderLoop = true

    if (this._container) {
      this._map.container.removeChild(this._container)
    }
  }

  update() {
    this.renderCesium()
    this.renderThreeObj()
    this.renderCamera()
  }

  renderCesium() {
    this._map.viewer.render()
  }

  renderThreeObj() {
    const width = this._container.clientWidth
    const height = this._container.clientHeight
    this.renderer.setSize(width, height)
    this.renderer.render(this.scene, this.camera)
  }

  renderCamera() {
    // register Three.js scene with Cesium
    this.camera.fov = Cesium.Math.toDegrees(this._map.camera.frustum.fovy) // ThreeJS FOV is vertical
    this.camera.updateProjectionMatrix()

    // Clone Cesium Camera projection position so the
    // Three.js Object will appear to be at the same place as above the Cesium Globe

    this.camera.matrixAutoUpdate = false

    this.camera.lookAt(new THREE.Vector3(0, 0, 0))

    const cvm = this._map.camera.viewMatrix
    const civm = this._map.camera.inverseViewMatrix

    this.camera.matrixWorld.set(
      civm[0],
      civm[4],
      civm[8],
      civm[12],
      civm[1],
      civm[5],
      civm[9],
      civm[13],
      civm[2],
      civm[6],
      civm[10],
      civm[14],
      civm[3],
      civm[7],
      civm[11],
      civm[15]
    )

    this.camera.matrixWorldInverse.set(
      cvm[0],
      cvm[4],
      cvm[8],
      cvm[12],
      cvm[1],
      cvm[5],
      cvm[9],
      cvm[13],
      cvm[2],
      cvm[6],
      cvm[10],
      cvm[14],
      cvm[3],
      cvm[7],
      cvm[11],
      cvm[15]
    )

    const width = this._map.scene.canvas.clientWidth
    const height = this._map.scene.canvas.clientHeight
    this.camera.aspect = width / height
    this.renderer.setSize(width, height)
    this.camera.updateProjectionMatrix()

    this.renderer.clear()
    this.renderer.render(this.scene, this.camera)
  }
}