function _promptGet() {
	return document.getElementById('prompt').textContent;
}

function _promptGetAndClear() {
	let val = _promptGet();
	promptClear();
	return val;
}

function _promptDeleteLast() {
	let elem = document.getElementById('prompt');
	elem.textContent = elem.textContent.slice(0, -1);
}

function _promptClear() {
	document.getElementById('prompt').textContent = '';
}

let prompt_handler;
let prompt_handlers = {
	visit: {
		append(val) {
			let elem = document.getElementById('prompt');
			if (elem.textContent.length < 3) {
				elem.textContent += val;
				promptUpdateRem();
			}
		},

		backspace() {
			_promptDeleteLast();
			promptUpdateRem();
		},

		clear() {
			_promptClear();
			promptUpdateRem();
		},

		submit() {
			let pts = _promptGetAndClear();
			if (pts)
				Module.ccall('user_visit', 'number', ['number'], [pts]);
		},

		submit_rem() {
			let pts = _promptGetAndClear();
			if (pts)
				Module.ccall('user_visit', 'number', ['number'], [user_rem - pts]);
		}
	},
	num_darts: {
		append(val) {
			let elem = document.getElementById('prompt');
			if (elem.textContent.length < 3)
				elem.textContent += val;
		},

		backspace() {
			_promptDeleteLast();
		},

		clear() {
			_promptClear();
		},

		submit() {
			let n = _promptGetAndClear();
			if (n)
				Module.ccall('resp_numdarts', null, ['number'], [n]);
		}
	},
	init: {
		submit() {
			Module.ccall('start_match');
		}
	}
}

function setPromptHandler(ptr) {
	prompt_handler = prompt_handlers[UTF8ToString(ptr)];
}

function promptAppend(...args) {
	clearOi();
	prompt_handler?.append?.(...args);
}

function promptClear(...args) {
	clearOi();
	prompt_handler?.clear?.(...args);
}

function promptBackspace(...args) {
	clearOi();
	prompt_handler?.backspace?.(...args);
}

function promptSubmit(...args) {
	clearOi();
	prompt_handler?.submit?.(...args);
}

function promptSubmitRem(...args) {
	clearOi();
	prompt_handler?.submit_rem?.(...args);
}

function clearMatchLog() {
	document.getElementById('match').textContent = '';
}

let oi_timeout;
function oi() {
	document.getElementById('oi').style.visibility = 'visible';

	oi_timeout = setTimeout(function() { oi_timeout = null; clearOi() }, 3000);
}

function clearOi() {
	document.getElementById('oi').style.visibility = 'hidden';

	if (oi_timeout) {
		clearTimeout(oi_timeout);
		oi_timeout = null;
	}
}

let user_rem;
function updateUserRem(rem) {
	user_rem = rem;
	updateUserStateRem(rem);
}

function updateUserStateRem(rem) {
	let elem = document.getElementById('p1-rem');
	elem.textContent = rem < 0 || rem == 1 ? 'BUST' : rem;
	Module.ccall('get_suggested', null, ['number', 'number'], [rem, 1]);
}

function updateBoatStateRem(rem) {
	let elem = document.getElementById('p2-rem');
	elem.textContent = rem < 0 || rem == 1 ? 'BUST' : rem;
	Module.ccall('get_suggested', null, ['number', 'number'], [rem, 2]);
}

function updateUserName(p) {
	document.getElementById('p1-name').textContent = UTF8ToString(p);
}

function updateBoatName(p) {
	document.getElementById('p2-name').textContent = UTF8ToString(p);
}

function userSugg(p) {
	document.getElementById('p1-sugg').textContent = UTF8ToString(p);
}

function boatSugg(p) {
	document.getElementById('p2-sugg').textContent = UTF8ToString(p);
}

function updateUserAvg(avg) {
	document.getElementById('p1-avg').textContent = avg.toFixed(2);
}

function updateBoatAvg(avg) {
	document.getElementById('p2-avg').textContent = avg.toFixed(2);
}

function setPromptText(ptr) {
	document.getElementById('prompt').textContent = UTF8ToString(ptr);
}

function promptMsg(p) {
	document.getElementById('prompt-msg').textContent = UTF8ToString(p);
}

function promptSugg(p) {
	document.getElementById('prompt-sugg').textContent = UTF8ToString(p);
}

function promptUpdateRem() {
	let elem = document.getElementById('p1-rem');
	let pts = _promptGet();

	updateUserStateRem(pts ? user_rem - pts : user_rem);
}

function setUserActive() {
	document.getElementById('p2-state').classList.remove('active');
	document.getElementById('p1-state').classList.add('active');
}

function setBoatActive() {
	document.getElementById('p1-state').classList.remove('active');
	document.getElementById('p2-state').classList.add('active');
}

function setNoneActive() {
	document.getElementById('p1-state').classList.remove('active');
	document.getElementById('p2-state').classList.remove('active');
}

function scheduleBoatThrowing(pts, ptr, delay_ms) {
	// ptr to c string must be copied before returning
	let str = UTF8ToString(ptr);
	setTimeout(
		function() { Module.ccall('draw_boat_throwing', null,
			['number', 'string'], [pts, str]) },
		delay_ms);
}

function scheduleEndBoatThrowing(rem, avg, delay_ms) {
	setTimeout(
		function() { Module.ccall('end_boat_throwing', null,
			['number', 'number'], [rem, avg]) },
		delay_ms);
}

const POINT_CLASSES = [180, 140, 100, 60, 40, 20, 1, 0];
function drawVisit(visit_no, u_pts, u_rem, b_pts, b_rem, b_darts) {
	let elem = document.getElementById('match');

	for (let [i, ptr] of [u_pts, u_rem, visit_no, b_rem, b_pts, b_darts].entries()) {
		let div = document.createElement('div');
		let v = div.textContent = UTF8ToString(ptr);
		if (i == 0 || i == 4) {
			div.className = `p${POINT_CLASSES.find(x => x <= v)}`;
		} else if (i == 5) {
			if (v) div.textContent = `… ${v}`;
		}
		div.className += ` visit-col${i+1}`;
		elem.append(div);
	}

	elem.scrollTop = elem.scrollHeight;
}

function setStdev(val) {
	Module.ccall('change_stdev', null, ['number', 'number'], [val, val]);
}

function updateStdev(val) {
	document.getElementById('stdev').value = val;
}

function setDelay(val) {
	Module.ccall('change_delay', null, ['number'], [val]);
}

function updateDelay(val) {
	document.getElementById('delay').value = val;
}

function processKey(data) {
	if (data.altKey || data.ctrlKey || data.metaKey || data.target.type == 'text')
		return;
	let key = data.key;

	if (isFinite(key))
		promptAppend(key);
	else if (key == 'Enter')
		promptSubmit();
	else if (key == 'Backspace')
		promptBackspace();
	else if (key == 'r')
		promptSubmitRem();
}

function modal(id) {
	document.getElementById(id).style.display = 'block';
}

window.onclick = function(e) {
	if (e.target.classList.contains('modal')) e.target.style.display = 'none';
}

document.addEventListener('keydown', processKey);