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'

let camera, scene, renderer, renderer2d, wreck

// TODO: This needs to be retrieved automatically from some kill aggregator.
const killmails = [
	{id: 91831540, hash: "28d382e3f65b197a09b77387d1bc1c0b1c119f7a"},
	{id: 91831391, hash: "211d140b554fdd3029b9fdfc1845047e02cd247b"},
	{id: 91831371, hash: "40b6cf48a7195b78c90cd995fc4b08e2f02adc5f"},
	{id: 91831358, hash: "56d1a2febc5c7a0b8ad555dfa6a831a56127cd6a"},
	{id: 91831348, hash: "bddef3e77d7a7adba6f0945eab0348f6f22da065"},
	{id: 91831332, hash: "88eecb7ce4cac18bf9af37121099e6e4e4b96a00"},
	{id: 91831322, hash: "b557aa9e96e152692cadc8cceb53051efb19121f"},
	{id: 91831309, hash: "8c41b6fb2a9f1d5161315be247b8108aa862174e"},
	{id: 91831297, hash: "7f195d59988699c3d8acfed7f440c3f3bfb2645b"},
	{id: 91831290, hash: "70094fa543cd40f4358b5f43f51834ce570fe1c0"},
	{id: 91831288, hash: "a4ba2f968b61733871422f66bedcb3847459dc62"},
	{id: 91831269, hash: "9f2810a13f9c4f91a9afa84f4796d2ec44f9bca5"},
	{id: 91831253, hash: "be9ebd1b3a5867c592ad9ac4bb94977681eacb8e"},
	{id: 91831252, hash: "ac952791e96bbe2dfe9212c09fc5a7cfc52beb32"},
	{id: 91831179, hash: "a56823e7d3f7891839cd0057cb94e5c836cf280e"},
	{id: 91831174, hash: "38e52cc21615293a501ab5547c3c10ee4e8ebddd"},
	{id: 91831160, hash: "406dcc934b1ba7d65fdfa5aead88f15b54f811e7"},
	{id: 91831071, hash: "7945f486e20971a124d02fbe0dc837444575cf4c"},
	{id: 91831050, hash: "29b01fa248efffe2ebe7dc220e584ed779a91b28"},
]

const SCALE = 10000

init()
animate()

function Wreck(vec3) {
	const point = new THREE.Object3D()
	point.position.copy(vec3)

	const div = document.createElement('div')
	div.className = 'wreck'
	const w = document.importNode(wreck, true)
	div.appendChild(w)
	const label = new CSS2DObject(div)
	point.add(label)

	return point;
}

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")
			wreck = svg.documentElement
			return wreck
		})
}

function processKillmails(killmails) {
	let center = new THREE.Vector3()
	const positions = killmails.map(km => km.victim.position)
	positions.forEach(pos => center.add(new THREE.Vector3(pos.x, pos.y, pos.z)))
	center.divideScalar(positions.length)
	killmails.forEach(km => {
		const pos = km.victim.position
		const vec3 = new THREE.Vector3(pos.x, pos.y, pos.z)
		vec3.sub(center)
		vec3.divideScalar(SCALE)
		scene.add(Wreck(vec3))
	})
}

function init() {
	camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 100)
	camera.position.set(8, 8, 8)
	camera.lookAt(0, 0, 0)
	scene = new THREE.Scene()

	loadWreckIcon()
		.then(() => {
			const url = km => `https://esi.evetech.net/latest/killmails/${km.id}/${km.hash}/?datasource=tranquility`
			const retrieve = km => fetch(url(km)).then(response => response.json())
			return Promise.all(killmails.map(retrieve))
		})
		.then(processKillmails)

	const grid = new THREE.GridHelper(30, 30)
	scene.add(grid)

	renderer = new THREE.WebGLRenderer({antialias: true})
	renderer.setSize(window.innerWidth, window.innerHeight)
	document.body.appendChild(renderer.domElement)

	renderer2d = new CSS2DRenderer()
	renderer2d.setSize(window.innerWidth, window.innerHeight)
	renderer2d.domElement.style.position = 'absolute'
	renderer2d.domElement.style.top = '0px'
	document.body.appendChild(renderer2d.domElement)
	const controls = new OrbitControls(camera, renderer2d.domElement)
	controls.minDistance = 2
	controls.maxDistance = 24

	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)
			scene.background = rt
		});

	window.addEventListener('resize', onWindowResize)
}

function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight
	camera.updateProjectionMatrix()
	renderer.setSize(window.innerWidth, window.innerHeight)
	renderer2d.setSize(window.innerWidth, window.innerHeight)
}

function animate() {
	requestAnimationFrame(animate)
	renderer.render(scene, camera)
	renderer2d.render(scene, camera)
}