var PageList: PageList = {
	elements: {
		container: document.querySelector('.pageselector')
	},

	order: null,

	firstRender: true,

	render(pagelist: PageListItem[]) {
		var list = ce('div', 'list');

		PageList.order = pagelist.map((page) => {
			return page.pageID;
		});

		pagelist.forEach((pagelistitem, index) => {
			var pageitem = ce('div', 'pageitem', { pageID: pagelistitem.pageID });
			var name = ce('div', 'name', null, pagelistitem.name);
			pageitem.appendChild(name);
			var move = ce('div', 'move');

			var up = ce('div', [
				'moveitem',
				'up'
			]);
			up.appendChild(ce('img', 'normal', { src: '/stc/icon/up.png' }));
			up.appendChild(ce('img', 'selected', { src: '/stc/icon/up_gray.png' }));
			var down = ce('div', [
				'moveitem',
				'down'
			]);
			down.appendChild(ce('img', 'normal', { src: '/stc/icon/down.png' }));
			down.appendChild(ce('img', 'selected', { src: '/stc/icon/down_gray.png' }));
			up.onclick = (e: MouseEvent) => {
				e.stopPropagation();

				var current = PageList.order.indexOf(pagelistitem.pageID);
				var newIndex = Math.max(current - 1, 0);

				PageList.order.splice(current, 1);
				PageList.order.splice(newIndex, 0, pagelistitem.pageID);

				socket.emit('page', 'setorder', PageList.order);
			};
			down.onclick = (e: MouseEvent) => {
				e.stopPropagation();

				var current = PageList.order.indexOf(pagelistitem.pageID);
				var newIndex = Math.max(current + 1, 0);

				PageList.order.splice(current, 1);
				PageList.order.splice(newIndex, 0, pagelistitem.pageID);

				socket.emit('page', 'setorder', PageList.order);
			};
			move.appendChild(up);
			move.appendChild(down);
			pageitem.appendChild(move);
			pageitem.onclick = () => {
				PageHandler.request(pagelistitem.pageID, index);
			};
			list.appendChild(pageitem);

			if (PageHandler.currentPageID == pagelistitem.pageID) {
				PageHandler.request(pagelistitem.pageID, index);
			}
		});

		var existing = PageList.elements.container.querySelector('.list');
		if (existing) existing.parentElement.removeChild(existing);
		PageList.elements.container.appendChild(list);
	},

	select(pageID: string): boolean {
		var selectedFound = false;
		PageList.elements.container.querySelectorAll('.pageitem').forEach((item: HTMLDivElement) => {
			var itemPageID = item.getAttribute('pageID');
			if (itemPageID == pageID) {
				item.classList.add('selected');
				selectedFound = true;
			} else item.classList.remove('selected');
		});

		if (selectedFound) {
			history.pushState(null, null, `/pages/${pageID}`);
			TabController.setTitle(`Page ${pageID}`);
		}
		return selectedFound;
	},

	updateName(pageID: string, name: string) {
		var item = PageList.elements.container.querySelector(`.pageitem[pageid="${pageID}"]`);
		if (item) {
			var nameElement: HTMLDivElement = item.querySelector('.name');
			nameElement.innerText = name;
		}
	}
};

interface PageList {
	elements: {
		container: HTMLDivElement;
	};
	firstRender: boolean;
	order: string[];

	render: (pagelist: PageListItem[]) => void;
	select: (pageID: string) => boolean;
	updateName: (pageID: string, name: string) => void;
}
interface PageListItem {
	pageID: string;
	name: string;
}