var PageHandler: PageHandler = {
	elements: {
		pagename: document.querySelector('.pagename'),
		left: document.querySelector('.pageselector').querySelector('.box.left'),
		right: document.querySelector('.pageselector').querySelector('.box.right'),
		add: document.querySelector('.pageselector').querySelector('.box.add')
	},

	currentPageID: null,
	currentPage: null,
	currentIndex: null,

	request(pageID: string, index: number) {
		socket.emit('page', 'request', pageID, (err?: string, page?: Page_Config) => {
			if (err) UndeckedNotification(`Error whilst getting page ${pageID}: ${err}`, 'error', 5000);
			else {
				PageHandler.currentIndex = index;
				PageHandler.render(page);
			}
		});
	},

	render(page: Page_Config) {
		KeyHandler.clear();

		PageHandler.currentPageID = page.pageID;
		PageHandler.currentPage = page;

		PageList.select(page.pageID);

		PageHandler.elements.pagename.value = page.name;
		PageHandler.elements.pagename.removeAttribute('disabled');

		for (var y in page.keys) {
			for (var x in page.keys[y]) {
				KeyHandler.render(x, y, page.keys[y][x]);
			}
		}
	},

	listeners() {
		PageHandler.elements.pagename.oninput = () => {
			if (PageHandler.currentPageID != null && PageHandler.elements.pagename.value.length > 0) {
				socket.emit('page', 'setname', PageHandler.currentPageID, PageHandler.elements.pagename.value);
			}
		};

		PageHandler.elements.add.onclick = () => {
			var pageName = prompt('New page name', 'Untitled page');
			if (pageName && pageName.length > 0) {
				socket.emit('page', 'create', pageName);
			}
		};

		PageHandler.elements.left.onclick = () => {
			var selected = document.querySelector('.pageitem.selected');
			if (selected && selected.previousElementSibling) (<HTMLElement>selected.previousElementSibling).click();
		};

		PageHandler.elements.right.onclick = () => {
			var selected = document.querySelector('.pageitem.selected');
			if (selected && selected.nextElementSibling) (<HTMLElement>selected.nextElementSibling).click();
		};
	}
};

PageHandler.listeners();

interface PageHandler {
	elements: {
		pagename: HTMLInputElement;

		left: HTMLDivElement;
		right: HTMLDivElement;
		add: HTMLDivElement;
	};

	currentPageID: string;
	currentPage: Page_Config;
	currentIndex: number;

	request: (pageID: string, index: number) => void;
	render: (page: Page_Config) => void;
	listeners: () => void;
}

interface Page_Config {
	pageID: string;
	name?: string;

	keys?: Page_Config_Keys;
}

interface Page_Config_Keys {
	'0'?: {
		'0'?: Page_Key;
		'1'?: Page_Key;
		'2'?: Page_Key;
		'3'?: Page_Key;
		'4'?: Page_Key;
		'5'?: Page_Key;
		'6'?: Page_Key;
		'7'?: Page_Key;
		'8'?: Page_Key;
	};
	'1'?: {
		'0'?: Page_Key;
		'1'?: Page_Key;
		'2'?: Page_Key;
		'3'?: Page_Key;
		'4'?: Page_Key;
		'5'?: Page_Key;
		'6'?: Page_Key;
		'7'?: Page_Key;
		'8'?: Page_Key;
	};
	'2'?: {
		'0'?: Page_Key;
		'1'?: Page_Key;
		'2'?: Page_Key;
		'3'?: Page_Key;
		'4'?: Page_Key;
		'5'?: Page_Key;
		'6'?: Page_Key;
		'7'?: Page_Key;
		'8'?: Page_Key;
	};
	'3'?: {
		'0'?: Page_Key;
		'1'?: Page_Key;
		'2'?: Page_Key;
		'3'?: Page_Key;
		'4'?: Page_Key;
		'5'?: Page_Key;
		'6'?: Page_Key;
		'7'?: Page_Key;
		'8'?: Page_Key;
	};
}

type Icon = '';