const WEBSOCKET_URL = "ws://127.0.0.69:8080/ws";
const IMAGE_URL = "http://127.0.0.69:8080/image.png";

class Place {
	#loaded;
	#socket;
	#loadingp;
	#uiwrapper;
	#glWindow;

	constructor(glWindow) {
		this.#loaded = false;
		this.#socket = null;
		this.#loadingp = document.querySelector("#loading-p");
		this.#uiwrapper = document.querySelector("#ui-wrapper");
		this.#glWindow = glWindow;
	}

	initConnection() {
		this.#loadingp.innerHTML = "connecty craig";
		this.#connect(WEBSOCKET_URL);

		this.#loadingp.innerHTML = "downloady dave";
		fetch(IMAGE_URL)
		.then(async resp => {
			if (!resp.ok) {
				console.error("Error downloading map.");
				return null;
			}

			let buf = await this.#downloadProgress(resp);
			await this.#setImage(buf);

			this.#loaded = true;
			this.#loadingp.innerHTML = "";
			this.#uiwrapper.setAttribute("hide", true);
		});
	}

	async #downloadProgress(resp) {
		let len = resp.headers.get("Content-Length");
		let a = new Uint8Array(len);
		let pos = 0;
		let reader = resp.body.getReader();
		while(true) {
			let {done, value} = await reader.read();
			if (value) {
				a.set(value, pos);
				pos += value.length;
				this.#loadingp.innerHTML = "downloady dave " + Math.round(pos/len*100) + "%";
			}
			if(done) break;
		}
		return a;
	}

	#connect(path) {
		this.#socket = new WebSocket(path);

		const socketMessage = async (event) => {
			let b = await event.data.arrayBuffer();
    		this.#handleSocketSetPixel(b);
		};

		const socketClose = (event) => {
			this.#socket = null;
		};

		const socketError = (event) => {
			console.error("Error making WebSocket connection.");
			alert("failed to connecty craig");
			this.#socket.close();
		};

		this.#socket.addEventListener("message", socketMessage);
		this.#socket.addEventListener("close", socketClose);
		this.#socket.addEventListener("error", socketError);
	}

	setPixel(x, y, color) {
		if (this.#socket != null && this.#socket.readyState == 1) {
			let b = new Uint8Array(11);
			this.#putUint32(b.buffer, 0, x);
			this.#putUint32(b.buffer, 4, y);
			for (let i = 0; i < 3; i++) {
				b[8+i] = color[i];
			}
			this.#socket.send(b);
			this.#glWindow.setPixelColor(x, y, color);
			this.#glWindow.draw();
		} else {
			alert("Disconnected.");
			console.error("Disconnected.");
		}
	}

	#handleSocketSetPixel(b) {
		if (this.#loaded) {
			let x = this.#getUint32(b, 0);
			let y = this.#getUint32(b, 4);
			let color = new Uint8Array(b.slice(8));
			this.#glWindow.setPixelColor(x, y, color);
			this.#glWindow.draw();
		}
	}

	async #setImage(data) {
		let img = new Image()
		let blob = new Blob([data], {type : "image/png"});
		let blobUrl = URL.createObjectURL(blob);
		img.src = blobUrl;
		let promise = new Promise((resolve, reject) => {
			img.onload = () => {
				this.#glWindow.setTexture(img);
				this.#glWindow.draw();
				resolve();
			};
			img.onerror = reject;
		});
		await promise;
	}

	#putUint32(b, offset, n) {
    	let view = new DataView(b);
    	view.setUint32(offset, n, false);
	}

	#getUint32(b, offset) {
		let view = new DataView(b);
		return view.getUint32(offset, false);
	}
}