import * as THREE from 'https://unpkg.com/three@0.126.1/build/three.module.js'
import { OrbitControls } from 'https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js'
import { CSS2DRenderer, CSS2DObject } from 'https://unpkg.com/three@0.126.1/examples/jsm/renderers/CSS2DRenderer.js'

const SCALE = 10000
const METERS_IN_AU = 149597871000
const EXPIRY = 1000 * 60 * 10

class SkirmishGrid {
	scene = new THREE.Scene()
	helper = new THREE.GridHelper(50, 50, 0x303030, 0x222222)
	camera
	controls
	renderer
	renderer2d
	active = false

	constructor({container, renderer, renderer2d}) {
		this.container = container
		this.renderer = renderer
		this.renderer2d = renderer2d

		const aspect = this.container.clientWidth / this.container.clientHeight
		this.camera = new THREE.PerspectiveCamera(80, aspect, 0.1, 1000)
		this.camera.position.set(8, 8, 8)
		this.camera.lookAt(0, 0, 0)
		this.controls = new OrbitControls(this.camera, this.renderer2d.domElement)
		this.controls.minDistance = 2
		this.controls.maxDistance = 30
		this.controls.enableDamping = true
		this.controls.dampingFactor = 0.4

		this.add(this.helper)
	}

	add(obj) {
		this.scene.add(obj)
	}

	draw() {
		this.renderer.render(this.scene, this.camera)
		this.renderer2d.render(this.scene, this.camera)
		this.controls.update()
		if (this.active)
			requestAnimationFrame(() => this.draw())
		else
			this.renderer2d.domElement.innerHTML = ''
	}

	onresize() {
		this.renderer.setSize(this.container.clientWidth, this.container.clientHeight)
		this.renderer2d.setSize(this.container.clientWidth, this.container.clientHeight)
		this.camera.aspect = this.container.clientWidth / this.container.clientHeight
		this.camera.updateProjectionMatrix()
	}

	enable() {
		this.active = true
		this.controls.enabled = true
	}

	disable() {
		this.active = false
		this.controls.enabled = false
	}
}

class Wreck {
	domElement = document.createElement('div')
	point = new THREE.Object3D()
	killmail

	constructor({killmail, grid, battle}) {
		const labelElement = document.createElement('div')
		const object2d = new CSS2DObject(this.domElement)
		const ownerId = "alliance_id" in killmail.victim ? killmail.victim.alliance_id : killmail.victim.corporation_id
		const team = battle.teams.findIndex(team => undefined !== team.find(id => id == ownerId)) == 0 ? "teamA" : "teamB"
		const shipTypeId = killmail.victim.ship_type_id

		const typeName = battle.ships[shipTypeId].name
		const groupName = battle.ships[shipTypeId].group
		this.domElement.dataset.type = typeName
		this.domElement.dataset.group = groupName

		labelElement.textContent = typeName
		labelElement.classList.add('label')

		this.killmail = killmail
		this.timestamp = Date.parse(killmail.killmail_time)

		this.point.position.copy(killmail.victim.position)
		this.point.add(object2d)

		this.domElement.classList.add('wreck', team)
		this.domElement.appendChild(labelElement)
		this.domElement.onclick = () => window.open(`https://zkillboard.com/kill/${this.killmail.killmail_id}/`)
		this.domElement.oncontextmenu = () => {
			grid.controls.target.copy(this.point.position)
			grid.controls.update()
		}
	}

	toggleKilled(timestamp) {
		const timeDifference = this.timestamp - timestamp
		this.domElement.classList.remove('future', 'alive', 'killed', 'expired')
		if (timeDifference < -EXPIRY) {
			this.domElement.classList.add('expired')
		}
		else if (timeDifference <= 0) {
			this.domElement.classList.add('killed')
		}
		else if (timeDifference < EXPIRY) {
			this.domElement.classList.add('alive')
		}
		else {
			this.domElement.classList.add('future')
		}
	}
}

function vec3FromXYZ({x, y, z}) {
	return new THREE.Vector3(x, y, z)
}

function splitKillmails(clusters, killmail) {
	const vec3 = vec3FromXYZ(killmail.victim.position)
	const found = clusters.find(cluster => cluster[0].victim.position.distanceTo(vec3) < 100 * SCALE)
	killmail.victim.position = vec3
	if (found === undefined) {
		clusters.push([killmail])
	}
	else {
		found.push(killmail)
	}
	return clusters
}

function averagePosition(positions) {
	const sum = positions.reduce((sum, pos) => sum.add(pos), new THREE.Vector3())
	return sum.divideScalar(positions.length)
}

function processBattle({battle, renderer, renderer2d, container, toolbar, skybox}) {
	const clusters = battle.killmails.reduce(splitKillmails, new Array())

	let elements = []
	let grids = []
	const gridSelection = document.getElementById("grid")
	clusters.forEach(cluster => {
		const option = document.createElement("option")
		const origin = new THREE.Vector3()
		origin.copy(cluster[0].victim.position)
		origin.divideScalar(METERS_IN_AU)
		option.text = `${origin.x.toFixed(1)} AU, ${origin.y.toFixed(1)} AU, ${origin.z.toFixed(1)} AU`
		gridSelection.options.add(option)

		const center = averagePosition(cluster.map(km => km.victim.position))
		const grid = new SkirmishGrid({container, renderer, renderer2d})
		cluster.forEach(killmail => {
			killmail.victim.position.sub(center).divideScalar(SCALE)
			const wreck = new Wreck({killmail, grid, battle})
			grid.add(wreck.point)
			elements.push(wreck)
		})
		grids.push(grid)
		window.addEventListener('resize', () => grid.onresize())
	})
	gridSelection.oninput = () => {
		grids.forEach(g => g.disable())
		grids[gridSelection.selectedIndex].enable()
		grids[gridSelection.selectedIndex].draw()
	}
	gridSelection.oninput()

	skybox.then(skybox => {
		const rt = new THREE.WebGLCubeRenderTarget(skybox.image.height)
		rt.fromEquirectangularTexture(renderer, skybox)
		grids.forEach(g => g.scene.background = rt)
	})

	const start = Date.parse(battle.started_at) - EXPIRY
	const end = Date.parse(battle.ended_at) + EXPIRY

	const bottomBar = document.createElement("div")
	const seekbar = document.createElement("div")
	const progress = document.createElement("div")
	const tip = document.createElement("div")
	const play = document.createElement("button")
	bottomBar.classList.add("bottom-bar")
	seekbar.classList.add("seekbar")
	seekbar.draggable = true
	progress.classList.add("progress")
	progress.style.width = "0%"
	tip.classList.add("tip")
	play.innerText = "Play"

	container.appendChild(bottomBar)
	bottomBar.appendChild(play)
	bottomBar.appendChild(seekbar)
	seekbar.appendChild(progress)
	progress.appendChild(tip)

	let current = start
	let isPlaying = false
	let callbackId
	play.onclick = () => {
		isPlaying = !isPlaying
		if (isPlaying) {
			callbackId = setInterval(() => {
				if (current + 5000 > end) {
					current = end
					isPlaying = false
					clearInterval(callbackId)
				}
				else {
					current += 5000
				}
				elements.forEach(item => item.toggleKilled(current))
				const norm = (current - start) / (end - start)
				progress.style.width = `${norm * 100}%`
			}, 80)
		}
		else {
			clearInterval(callbackId)
		}
	}
	const seekWithBar = e => {
		const rect = e.srcElement.getBoundingClientRect()
		const norm = Math.min(1, Math.max(0, (e.clientX - rect.left) / e.srcElement.clientWidth))
		const lim = Math.floor(norm * e.srcElement.clientWidth) / e.srcElement.clientWidth
		const timestamp = start + (end - start) * lim
		if (e.clientX != 0 && current != timestamp) {
			current = timestamp
			elements.forEach(item => item.toggleKilled(timestamp))
			progress.style.width = `${lim * 100}%`
		}
	}
	elements.forEach(item => item.toggleKilled(start))

	seekbar.onclick = seekWithBar
	seekbar.ondrag = seekWithBar
	seekbar.ondragstart = e => e.dataTransfer.setDragImage(new Image(0, 0), 0, 0)
}

export function init({id, container, toolbar}) {
	const renderer = new THREE.WebGLRenderer({antialias: true})
	const renderer2d = new CSS2DRenderer()

	renderer.setSize(container.clientWidth, container.clientHeight)
	renderer2d.setSize(container.clientWidth, container.clientHeight)
	renderer2d.domElement.style.position = 'absolute'
	renderer2d.domElement.style.top = '0px'

	container.appendChild(renderer.domElement)
	container.appendChild(renderer2d.domElement)

	const loader = new THREE.TextureLoader()
	const skybox = loader.loadAsync("https://i.imgur.com/rDGOLFC.jpg") // TODO: Don't use imgur as CDN.

	fetch(`/battles/${id}`)
		.then(response => response.json())
		.then(battle => processBattle({battle, renderer, renderer2d, container, toolbar, skybox}))
}