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 ESI = "https://esi.evetech.net/latest"
const SCALE = 10000

class SkirmishGrid {
	scene = new THREE.Scene()
	camera
	controls
	renderer
	renderer2d

	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
	}

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

	draw() {
		this.renderer.render(this.scene, this.camera)
		this.renderer2d.render(this.scene, this.camera)
		this.controls.update()
		requestAnimationFrame(() => this.draw())
	}

	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()
	}
}

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

	constructor({killmail, position, icon, grid}) {
		const iconElement = document.importNode(icon, true)
		const object2d = new CSS2DObject(this.domElement)

		this.killmail = killmail
		const team = killmail.team > 1 ? "teamA" : "teamB"
		this.domElement.classList.add('wreck', team)
		const shipTypeId = this.killmail.victim.ship_type_id
		fetch(`${ESI}/universe/types/${shipTypeId}/?datasource=tranquility`, {cache: "force-cache"})
			.then(response => response.json())
			.then(typeId => this.domElement.dataset.label = typeId.name)
		this.domElement.appendChild(iconElement)
		this.point.position.copy(position)
		this.point.add(object2d)

		this.domElement.onclick = () => window.open(`https://zkillboard.com/kill/${this.killmail.killmail_id}/`)
		this.domElement.oncontextmenu = () => {
			grid.controls.target.copy(position)
			grid.controls.update()
		}
	}
}

function loadWreckIcon() {
	return fetch("wreck.svg")
		.then(response => response.text())
		.then(text => {
			const parser = new window.DOMParser()
			const svg = parser.parseFromString(text, "image/svg+xml")
			return svg.documentElement
		})
}

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 processKillmails(grid, killmails, icon) {
	let clusters = killmails.reduce(splitKillmails, new Array())
	let center = averagePosition(clusters[0].map(km => km.victim.position))
	clusters[0].sort((a, b) => a.killmail_time.localeCompare(b.killmail_time))
	let elements = []
	clusters[0].forEach(killmail => {
		const vec3 = killmail.victim.position
		vec3.sub(center)
		vec3.divideScalar(SCALE)
		const wreck = new Wreck({position: vec3, killmail, icon, grid})
		grid.add(wreck.point)
		elements.push(wreck.domElement)
	})
	const timeline = document.getElementById("timeline")
	timeline.max = elements.length + 1
	timeline.oninput = function () {
		elements.slice(0, this.value).forEach(element => element.classList.add("killed"))
		elements.slice(this.value, this.max).forEach(element => element.classList.remove("killed"))
	}
}

function init() {
	const container = document.getElementById("container")
	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 grid = new SkirmishGrid({renderer, renderer2d, container})
	const url = new URL(window.location.href)

	let icon = loadWreckIcon()

	fetch(url.searchParams.get("related") + ".json")
		.then(response => response.json())
		.then(killmails => {
			const url = km => `${ESI}/killmails/${km.id}/${km.hash}/?datasource=tranquility`
			const retrieve = km => fetch(url(km))
				.then(response => response.json())
				.then(data => { data.team = km.team; return data })
			return Promise.all(killmails.map(retrieve))
		})
		.then(killmails => {
			icon.then(icon => processKillmails(grid, killmails, icon))
		})

	const helper = new THREE.GridHelper(50, 50)
	grid.add(helper)

	const loader = new THREE.TextureLoader()
	loader.loadAsync("https://i.imgur.com/rDGOLFC.jpg") // TODO: Don't use imgur as CDN.
		.then(skybox => {
			const rt = new THREE.WebGLCubeRenderTarget(skybox.image.height)
			rt.fromEquirectangularTexture(renderer, skybox)
			grid.scene.background = rt
		});

	window.addEventListener('resize', () => grid.onresize())
	grid.draw()
}

init()