import * as canvas from './canvas.js';
import * as html from './html.js';
import * as utils from './utils.js';
import * as words from './words.js';

if (!location.hash) {
	location.hash = utils.randomString(10);
}

var url = 'https://via.ce9e.org/msg/drawful/' + location.hash.slice(1);

var state = {
	name: null,
	scores: {},
	host: null,

	// used only by host
	word: null,
	lies: {},
	picks: {},
};

var send = function(cmd, arg) {
	return fetch(url, {
		method: 'POST',
		body: JSON.stringify([cmd, state.name, arg]),
	});
};

var resetRound = function() {
	state.host = null;
	state.word = null;
	state.lies = {};
	state.picks = {};
	canvas.clear();
	document.querySelectorAll('form').forEach(el => {
		el.reset();
		html.disableForm(el, false);
	});
	html.updateList('#lie-done', []);
	html.updateList('#pick-done', []);
};

var score = function() {
	var player, pick, lier;

	state.scores[state.host] = state.scores[state.host] || 0;
	for (player in state.picks) {
		state.scores[player] = state.scores[player] || 0;
	}

	var values = Object.values(state.picks);
	var unique = new Set(values);
	if (values.length >= 4 && unique.size == 1) {
		for (player in state.picks) {
			state.scores[player] += 2
		}
	} else {
		for (player in state.picks) {
			pick = state.picks[player];
			if (pick === state.word) {
				state.scores[player] += 3;
				state.scores[state.host] += 3;
			} else {
				for (lier in state.lies) {
					if (pick === state.lies[lier] && player !== lier) {
						state.scores[lier] += 1;
					}
				}
			}
		}
	}
};

document.querySelector('#name').addEventListener('submit', function(event) {
	event.preventDefault();
	state.name = event.target.username.value;
	html.setView('scores');
});

document.querySelector('#scores').addEventListener('submit', function(event) {
	event.preventDefault();
	send('claimHost');
});

document.querySelector('#draw-host').addEventListener('submit', function(event) {
	event.preventDefault();
	var img = canvas.toDataURL();
	document.querySelectorAll('img').forEach(el => el.src = img);
	send('setImage', img).then(() => {
		html.setView('lie-host');
	});
});

document.querySelector('#lie').addEventListener('submit', function(event) {
	event.preventDefault();
	send('setLie', event.target.word.value).then(() => {
		html.disableForm(event.target, true);
	});
});

document.querySelector('#lie-host').addEventListener('submit', function(event) {
	event.preventDefault();
	var options = [state.word];
	for (var player in state.lies) {
		options.push(state.lies[player]);
	}
	while (options.length < 5) {
		options.push(words.randomWord());
	}
	options = utils.shuffle(options);
	html.updateList('#options-host', options);
	send('setOptions', options).then(() => {
		html.setView('pick-host');
	});
});

document.querySelector('#pick').addEventListener('submit', function(event) {
	event.preventDefault();
	send('setPick', event.target.pick.value).then(() => {
		html.disableForm(event.target, true);
	});
});

document.querySelector('#pick-host').addEventListener('submit', function(event) {
	event.preventDefault();
	score();
	send('setScores', state.scores).then(() => {
		html.updateScoreTable('#scores table', state.scores);
		html.setView('scores');
		resetRound();
	});
});

var evtSource = new EventSource(url);
evtSource.onmessage = function(event) {
	if (!state.name) return;

	var [cmd, sender, arg] = JSON.parse(event.data);

	if (!state.host && cmd === 'claimHost') {
		state.host = sender;
		if (state.name === state.host) {
			state.word = words.randomWord();
			document.querySelector('#word').textContent = state.word;
			html.setView('draw-host');
		} else {
			html.setView('draw');
		}
	} else if (state.name === state.host) {
		if (cmd === 'setLie') {
			state.lies[sender] = arg;
			html.updateList('#lie-done', Object.keys(state.lies));
		} else if (cmd === 'setPick') {
			state.picks[sender] = arg;
			html.updateList('#pick-done', Object.keys(state.picks));
		}
	} else if (sender === state.host) {
		if (cmd === 'setImage') {
			document.querySelectorAll('img').forEach(el => el.src = arg);
			html.setView('lie');
		} else if (cmd === 'setOptions') {
			html.updateOptionList('#pick ul', arg);
			html.updateOptionList('#options-host', arg);
			html.setView('pick');
		} else if (cmd === 'setScores') {
			state.scores = arg;
			resetRound();
			html.updateScoreTable('#scores table', state.scores);
			html.setView('scores');
		}
	}
};