// const perlinScale = 3;
const IP_ADDRESS = 'http://127.0.0.1:8082/'


var SERVER_CONNECTION = "disconnected"

const tileSize = 24;
const gridSize = [18, 18];
var cash = 99;
var world
var tiles = []

var canvas = document.getElementById('canvas');
var hud = document.getElementById('hud');
var ctx = canvas.getContext('2d');
var hctx = hud.getContext('2d');
var socket = io.connect(IP_ADDRESS);
function joinGame(socket, data){
		socket.emit('joinGame', data);
}
function leaveGame(socket){
		socket.emit('leaveGame', {});
}

socket.on('connect', function(data){
	SERVER_CONNECTION = "connected"
	updateConnectionStatus();
})
socket.on('disconnect', function(data){
	SERVER_CONNECTION = "disconnected"
	updateConnectionStatus();
})

function updateConnectionStatus() {
	document.getElementById("status").textContent = `Server Connection: ${SERVER_CONNECTION}`
}

class Cursor {
	constructor(){
		this.x = 0
		this.y = 0
		this.xold = 0
		this.yold = 0
	}

}
var cursor = new Cursor();

window.onbeforeunload = function(){
   socket.disconnect();
	 world = []
}

socket.on('gameVars', function(tank){
  gridSize = tank.gridSize;
  world = tank.world;
});

socket.on('playerList', function(data){
	console.log(data)
});

socket.on('sync', function (sync){
  world = sync.world;
  render()
})

function loadSprites(){
	var spriteJank = document.getElementById('spriteJank');
	var ctxj = spriteJank.getContext('2d');
		var spriteSheet = new Image();

	spriteSheet.src = '/sheet.png'
	spriteSheet.onload = function() {


		for (y = 0; y < 16; y++) {
			for (x = 0; x < 16; x++) {
				ctxj.drawImage(spriteSheet, -x*24,-y*24)
				var tmp = new Image();
				tmp.src = spriteJank.toDataURL();
				ctxj.clearRect(0, 0, 24, 24);
				tiles.push(tmp)
			}
		}
	}
	spriteJank.remove();
}

function submit(event) {

	document.getElementById('menu').style = "display: none;"
	document.getElementById('container').style = ""
	const room = document.getElementById("room").value
	const name = document.getElementById("name").value
	if (room == '' || name == '' || SERVER_CONNECTION == 'disconnected') return

	joinGame(socket, {room: room, name: name})
	event.preventDefault();
}



window.onload = function () {
	// Register Events
	const form = document.getElementById('form');
	form.addEventListener('submit', submit);

	hud.addEventListener('mousemove', e => {
		mouseMoved(e)
	});

	hud.addEventListener("mousedown", function(e)
	{
			getMousePosition(canvas, e);
	});

	//Set canvases to be ready
	canvas.width = tileSize*gridSize[0];
	canvas.height = tileSize*gridSize[1];
	hud.width = canvas.width
	hud.height = canvas.height

	//Load all sprites into memory
	loadSprites()
}

function randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

function render() {      // DRAW THE IMAGE TO THE CANVAS.
  let x, y = 0
  for(x = 0; x < gridSize[0]; x++){
    for(y = 0; y < gridSize[1]; y++){
      const xu = x*tileSize;
      const yu = y*tileSize;

			// Draw buildings
			switch (world[x][y].type) {
				case (0):
	        ctx.drawImage(tiles[0], xu,yu)
				break;
				case (1):
					ctx.drawImage(tiles[2], xu,yu)
				break;
				case (2):
					ctx.drawImage(tiles[1], xu,yu)
				break;
			}

			// Draw Structures
			switch (world[x][y].structure) {
				case (1):
		      ctx.drawImage(tiles[4], xu,yu)
				break;
				case (2):
      		ctx.drawImage(tiles[32], xu,yu)
				break;
				case (3):
      		ctx.drawImage(tiles[33], xu,yu)
				break;
				case (4):
					ctx.drawImage(tiles[34], xu,yu)
				break;
			}

			// Draw Property overlays
			if (world[x][y].color != null){
				ctx.beginPath();
				ctx.fillStyle = world[x][y].color;

				ctx.rect(xu, yu, tileSize, tileSize)
				ctx.globalAlpha = 0.6;
				ctx.fill()
				ctx.globalAlpha = 1;
			}

    }
  }
  console.log("image Rendered")
}

function getMousePosition(canvas, event) {
    // Get mouse position on canvas
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    // const xu = Math.floor(x/tileSize)
    // const yu = Math.floor(y/tileSize)
		const xu = cursor.x
		const yu = cursor.y
    // Convert canvas coordinates to usable coordinates within the coordinate system


    console.log("Click!")
		console.log(xu,yu)
		socket.emit('clickCanvas', {tilePosition: [xu,yu], structure: 2});

}
function mouseMoved(event) {
	const x = Math.floor(event.offsetX/tileSize)
	const y = Math.floor(event.offsetY/tileSize)
	if (cursor.xold != x || cursor.yold != y) {
		cursor.x = x
		cursor.y = y
		hctx.clearRect(cursor.xold*tileSize, cursor.yold*tileSize, tileSize, tileSize)
		hctx.drawImage(tiles[80], x*tileSize,y*tileSize)
	cursor.xold = x
	cursor.yold = y
}
}