import * as ConnectedForm from GUI.ConnectedForm;
import * as ListSelector from GUI.ListSelector;
import * as Games from GUI.Screen.Hall.Games;
import I18n;
import Messaging;
import {opponent, room} from Room;
import * as Dom from UnitJS.Dom;

var form = ConnectedForm.get('room');
var list = ListSelector.make('players', showPlayer);
var them = null;
initDOM();

return {
	refresh: refresh
};

function initDOM() {
	form.root.getElementsByTagName('label')[0].textContent = I18n.get('startGameWith');
	form.root.invite.value = I18n.get('invite');
	form.root.addEventListener('submit', function(e) {
		e.preventDefault();
		Messaging.send({tag: "Invitation", to: them});
		Games.table.insert(them, {vs: opponent(them), yourTurn: false});
		Games.refresh();
	});
	form.root.them.addEventListener("input", function() {refresh();});
}

function showPlayer(player) {
	return Dom.make('li', {
		textContent: player.name,
		onClick: function() {form.root.them.value = player.name; refresh();},
		class: 'clickable'
	});
}

function refresh() {
	var name = form.root.them.value;
	them = null;
	var filtered = room.getAll(
		function(player) {return player.name.match(name);}
	);
	list.refresh(filtered);
	var exact = filtered.find(exactMatch(name));
	if(exact != undefined) {
		them = exact.key;
	} else if(filtered.length == 1) {
		them = filtered[0].key;
	} else if(filtered.length == 0) {
		list.message.textContent = I18n.get(
			name.length > 0 ? "notFound" : "alone"
		);
	}
	form.enable(them != undefined);
}

function exactMatch(name) {
	return function(player) {
		return player.name === name;
	};
}