import * as TWEEN from '@tweenjs/tween.js'
import * as THREE from 'three'
import POINTS from './points'
import { amtMount, amtRemove } from '../center'

const tracking = ref(false)
const direct = ref(0)

const roamming = ref(false)
const roamAct = ref(0)
const roamCurve = ref(null)

const fosViews = computed(() => {
  return POINTS.map((item, x) => {
    if ((x + 1) % 50 === 0) {
      return item
    } else {
      return null
    }
  }).filter(point => point)
}) 

// 车辆追踪
const goTracking = (tunnels, camera) => {

  const cars = tunnels.map(item => {
    return item.cars
  }).flat()

  tracking.value = true

  // const xCar = cars.slice(-1)[0]

  // if (xCar) {
  //   xCar.follow(camera)
  //   tracking.value = true
  // } else {

  // }
  
}

// 停止追踪
const stopTrack = (cars, camera) => {
  const xCar = cars.find(x => x.followed)
  xCar.stopFollow()
  camera.position.set(-10, 10, 0)
  camera.lookAt(0, 5, 0)
  tracking.value = false
}

// 变道
const laneChange = (cars) => {
  const xCar = cars.find(x => x.followed)
  xCar.laneChange(3 - xCar.lane)
}

// 开启漫游
const goRoamming = () => {
  roamming.value = true
}

// 开始漫游
const roamChange = (act, context) => {

  const progress = (act + 1) / fosViews.value.length

  const tPot = roamCurve.value.getPointAt(progress)

  // console.log(tPot)

  const direction = roamCurve.value.getTangentAt(progress)

  // const tPot = fosViews.value[act]
  // tPot.y = tPot.y + 10

  
  const tween = new TWEEN.Tween({ ...context.camera.position })
    .to(tPot, 5000)
    .onUpdate((e, x) => {
      context.camera.position.copy(e)
      const direction = roamCurve.value.getTangentAt(progress)
    })
    .easing(TWEEN.Easing.Quadratic.InOut)
  
  const key = amtMount(() => {
    tween.update()
  })

  tween.start()
  tween.onComplete(() => {
    // console.log(count)
    amtRemove(key)
  })

}

// 引导线构建
const createCurve = (scene) => {

  roamCurve.value = new THREE.CatmullRomCurve3(POINTS.map(item => new THREE.Vector3(item.x, item.y + 10, item.z)))
  roamCurve.value.curveType = 'chordal'
  const geoPoints = roamCurve.value.getPoints(1000)
  const line = new THREE.Line(
    new THREE.BufferGeometry().setFromPoints(geoPoints),
    new THREE.LineBasicMaterial({ color: 0x00ff00, opacity: 1 })
  )
  scene.add(line)

}

// 路段调转
const tunAround = (context) => {

  createCurve(context.scene)

  // const tPot = roamCurve.value.getPointAt(0.5)
  // const nextPoint = 
  // const direction = roamCurve.value.getTangentAt(1).add(tPot)

  // console.log(direction)

  // const angle = Math.atan2(direction.y, direction.x)

  // console.log(THREE.MathUtils.radToDeg(angle))

  // const angle = Math.atan2(point.x - context.camera.position.x, )


  context.camera.position.set(2792, 10, -2262.5)
  context.camera.lookAt(2760, 0, -2225)

  // const run = () => {

  //   const tPot = roamCurve.value.getPointAt(count / 1000)
  //   const direction = roamCurve.value.getTangentAt(count / 1000).add(tPot)

  //   tweenContext.value = new TWEEN.Tween({...context.camera.position})
  //   .to(tPot, 10)
  //   // .easing(TWEEN.Easing.Quadratic.InOut)
  //   .onUpdate((pt) => {
  //     context.camera.position.copy(pt)
  //     context.camera.lookAt(direction)
  //   })
  //   .onComplete(() => {
  //     if (count < 1000) {
  //       count++
  //       run()
  //     }
      
  //   })
  //   .start()

  // }

  
  // run()

  
}

// 点位测试
const pointTest = (camera, controls, scene) => {

  // 摄像机位置
  camera.position.set(2890, 10, -2261) // 调试视角

  // 目光焦点
  controls.target = new THREE.Vector3(2760, 10, -2225) 

  const geometry = new THREE.BoxGeometry(3, 3, 3)
  const material = new THREE.MeshBasicMaterial(0xffffff)

  // 摄像机
  const cube1 = new THREE.Mesh(geometry, material)
  cube1.position.set(2792, 0, -2262.5)

  // 目光焦点
  const cube2 = new THREE.Mesh(geometry, material)
  cube2.position.set(2760, 0, -2225)

  scene.add(cube1)
  scene.add(cube2)


}

export {
  tracking,
  roamming,
  fosViews,
  tweenContext,

  goTracking,
  stopTrack,
  laneChange,
  tunAround,

  goRoamming,
  roamChange,
  roamAct,

  pointTest
}