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

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

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

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

function scheduleCCall(f, ms, ...args) {
	const func = UTF8ToString(f);
	setTimeout(() => Module[`_${func}`](...args), ms);
}

function promptGet() {
	let tc = document.getElementById('prompt-input').textContent;
	let len = lengthBytesUTF8(tc) + 1;
	let str = _malloc(len);
	stringToUTF8(tc, str, len);
	return str;
}

function setPromptActive() {
	document.getElementById('prompt').classList.add('active')
}

function setPromptInactive() {
	document.getElementById('prompt').classList.remove('active')
}

function setPromptInput(ptr) {
	document.getElementById('prompt-input').textContent = UTF8ToString(ptr);
}

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

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

function promptHandle(command, data) {
	Module.ccall('prompt_handle', null, ['string', 'string'], [command, data]);
}

function setKeypad(keypad) {
	let keypad_id = `keypad-${UTF8ToString(keypad)}`;
	document.querySelectorAll('.keypad').forEach(e => {
		e.style.display = e.id === keypad_id ? '' : 'none';
	});
}

function isKeyActive(k) {
	return document.getElementById(`key-${UTF8ToString(k)}`).classList
		.contains('active');
}

function toggleKey(k) {
	document.getElementById(`key-${UTF8ToString(k)}`).classList
		.toggle('active');
}

function deactivateKey(k) {
	document.getElementById(`key-${UTF8ToString(k)}`).classList
		.remove('active');
}

function setKeyLabelSubmit(ptr) {
	document.getElementById('key-submit').textContent = UTF8ToString(ptr);
}

function setKeyLabelRem(ptr) {
	document.getElementById('key-rem').textContent = UTF8ToString(ptr);
}

function setPlayerActive(n) {
	document.querySelectorAll('[id$=-info]').forEach(e =>
		e.classList[n && e.id == `p${n}-info` ? 'add' : 'remove']('active'));
}

function showPlayerInfo(n) {
	document.getElementById(`p${n}-info-inner`).style.visibility = 'visible';
}

function hidePlayerInfo(n) {
	document.getElementById(`p${n}-info-inner`).style.visibility = 'hidden';
}

function updatePlayerName(n, ptr) {
	document.getElementById(`p${n}-name`).textContent = UTF8ToString(ptr);
}

function updatePlayerRem(n, ptr) {
	document.getElementById(`p${n}-rem`).textContent = UTF8ToString(ptr);
}

function updatePlayerSugg(n, ptr) {
	document.getElementById(`p${n}-sugg`).textContent = UTF8ToString(ptr);
}

function updatePlayerAvg(n, avg) {
	document.getElementById(`p${n}-avg`).textContent = avg.toFixed(2);
}

function clearVisits() {
	document.getElementById('visits').textContent = '';
}

const POINT_CLASSES = [180, 140, 100, 60, 40, 20, 0];
function drawVisit(visit_no, p1_pts, p1_rem, p2_pts, p2_rem, p2_darts) {
	let e = document.getElementById('visits');

	for (let [i, ptr] of [
		p1_pts, p1_rem, visit_no, p2_rem, p2_pts, p2_darts].entries()) {

		let div = e.appendChild(document.createElement('div'));
		let v = div.textContent = UTF8ToString(ptr);
		div.classList.add(`visit-col${i+1}`);
		if (i == 0 || i == 4)
			div.classList.add(`p${POINT_CLASSES.find(x => x <= v)}`);
		else if (i == 5 && v)
			div.textContent = `… ${v}`;
	}

	e.scrollTop = e.scrollHeight;
}

function setDelay(val, update_opts = true) {
	if (update_opts) localStorage.setItem('dartboat_delay', val);
	_set_delay(Number(val));
}

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

function setStdev(val, update_opts = true) {
	if (update_opts) localStorage.setItem('dartboat_stdev', val);
	_set_stdev(Number(val), Number(val));
}

function updateStdev(val) {
	document.getElementById('stdev').value = parseFloat(
		val.toFixed(2).slice(0, 4));
}

function readOpts() {
	let val;

	if ((val = localStorage.getItem('dartboat_delay')))
		setDelay(val, false);

	if ((val = localStorage.getItem('dartboat_stdev')))
		setStdev(val, false);
}

document.addEventListener('click', e => {
	const modal = e.target.dataset.modal;
	if (modal)
		document.getElementById(modal).style.display = 'block';

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

document.addEventListener('click', e => {
	const command = e.target.dataset.command;
	if (command)
		command.split(';').forEach(x => promptHandle(...x.split(':', 2)));
});

document.addEventListener('change', e => {
	const setting = e.target.dataset.setting;
	if (setting === 'delay')
		setDelay(e.target.value);
	else if (setting === 'stdev')
		setStdev(e.target.value);
});

document.addEventListener('keydown', e => {
	if (e.altKey || e.ctrlKey || e.metaKey || e.target.type == 'text')
		return;

	if (isFinite(e.key))
		promptHandle('append', e.key);
	else if (e.key == 'Enter')
		promptHandle('submit');
	else if (e.key == 'Backspace')
		promptHandle('backspace');
	else if (e.key == 'c')
		promptHandle('clear');
	else if (e.key == 'r')
		promptHandle('rem');
	else if (e.key == 'u')
		promptHandle('undo');
});

function boatReady() {
	if (document.readyState === 'loading')
		document.addEventListener('DOMContentLoaded', () => _init());
	else
		_init();
}