declare var ce: (
	type: string,
	classList?: string | string[],
	attributes?: { [key: string]: string },
	innerText?: string,
	innerHTML?: string
) => HTMLElement;
declare var UndeckedNotification: (message: string, type?: 'info' | 'error', time?: number) => void;
declare var io: any;

var responseToken = Math.random().toString(16).substr(2, 8);

var socket = io('/');

socket.on('connect', () => {
	console.log('Connected to server');

	socket.emit('init', 'home');
});

var fontSizeRatio: number = null;
var renderQuality: number = null;
socket.on('quality', (quality: number) => {
	document.querySelectorAll('canvas.ready').forEach((canvas: HTMLCanvasElement) => {
		canvas.width = quality;
		canvas.height = quality;

		var context = canvas.getContext('2d');
		context.textBaseline = 'middle';
		context.textAlign = 'center';
	});

	renderQuality = quality;
	fontSizeRatio = quality / 100;
});

socket.on('pagelist', (pagelist: PageListItem[]) => {
	(function render() {
		if (fontSizeRatio != null) PageList.render(pagelist);
		else setTimeout(render, 100);
	})();
});

socket.on('connectedlist', (connected: ConnectedList[]) => Connections.renderConnected(connected));

socket.on('page', (query: string, ...args: any[]) => {
	switch (query) {
		case 'updatename':
			var pageID: string = args[0];
			var newName: string = args[1];

			PageList.updateName(pageID, newName);
			break;

		case 'updatekey':
			var pageID: string = args[0];
			var x: string = args[1];
			var y: string = args[2];
			var key: Page_Key = args[3];
			var returnResponseToken: string = args[4];

			if (PageHandler.currentPageID == pageID) {
				if (PageHandler.currentPage.keys[y] != undefined && PageHandler.currentPage.keys[y][x] != undefined)
					PageHandler.currentPage.keys[y][x] = key;

				if (responseToken != returnResponseToken) {
					KeyHandler.render(x, y, key);

					if (Editor.currentKey != undefined && Editor.currentKey.id == key.id) Editor.open(x, y, key);
				}
			}

			break;
	}
});