const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);

let oi_timeout;
function oi() {
	$('#oi').style.visibility = 'visible';

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

function clearOi() {
	$('#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 toCString(str) { // caller must free
	const size = lengthBytesUTF8(str) + 1;
	const ptr = _malloc(size);
	stringToUTF8(str, ptr, size);
	return ptr;
}

function elemGetContent(sel) { // caller must free
	return toCString($(UTF8ToString(sel)).textContent);
}

function elemSetContent(sel, str) {
	$(UTF8ToString(sel)).textContent = str ? UTF8ToString(str) : '';
}

function elemHasClass(sel, c) {
	return $(UTF8ToString(sel)).classList.contains(UTF8ToString(c));
}

function elemAddClass(sel, c) {
	$(UTF8ToString(sel)).classList.add(UTF8ToString(c));
}

function elemRemoveClass(sel, c) {
	$(UTF8ToString(sel)).classList.remove(UTF8ToString(c));
}

function elemToggleClass(sel, c) {
	$(UTF8ToString(sel)).classList.toggle(UTF8ToString(c));
}

function elemSetUniqClass(sel, c, sel_set) {
	selstr = sel && UTF8ToString(sel);
	cstr = UTF8ToString(c);
	$$(UTF8ToString(sel_set)).forEach(e =>
		e.classList[sel && e.matches(selstr) ? 'add' : 'remove'](cstr));
}

function promptHandle(command, data) {
	const str_c = toCString(command);
	const str_d = data && toCString(data);
	_prompt_handle(str_c, str_d);

	_free(str_c);
	if (str_d) _free(str_d);
}

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

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

		const div = e.appendChild(document.createElement('div'));
		const 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 svgAppendElemv(sel, elemc, elemv, off_name, off_n_attrs,
	off_attr_names,	off_attr_vals, off_content) {
	target = $(UTF8ToString(sel));

	for (let ptr = elemv; ptr < elemv + 4*elemc; ptr += 4) {
		const struct = HEAP32[ptr>>2];

		const e = document.createElementNS('http://www.w3.org/2000/svg',
			UTF8ToString(HEAP32[(struct + off_name)>>2]));

		const n_attrs = HEAP32[(struct + off_n_attrs)>>2];
		if (n_attrs) {
			const attr_names = HEAP32[(struct + off_attr_names)>>2];
			const attr_vals = HEAP32[(struct + off_attr_vals)>>2];
			for (let i = 0; i < n_attrs; ++i)
				e.setAttribute(UTF8ToString(HEAP32[(attr_names + i*4)>>2]),
					UTF8ToString(HEAP32[(attr_vals + i*4)>>2]));
		}

		const content = HEAP32[(struct + off_content)>>2];
		if (content) e.textContent = UTF8ToString(content);

		target.appendChild(e);
	}
}

function updateDelay(val) {
	$('#delay').value = val;
}

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

function setOpt(opt, val, update_opts = true) {
	if (update_opts) localStorage.setItem(`dartboat_${opt}`, val);

	if (opt === 'delay' || opt === 'stdev')
		Module[`_set_${opt}`](Number(val));
}

function readOpts() {
	let val;

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

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

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

document.addEventListener('DOMContentLoaded', () => {
	let f;

	f = e => e.target.dataset.command.split(';').forEach(x =>
		promptHandle(...x.split(':', 2)));
	$$('[data-command]').forEach(x => x.addEventListener('click', f));

	f = e => setOpt(e.target.dataset.setting, e.target.value);
	$$('[data-setting]').forEach(x => x.addEventListener('change', f));

	f = e => $(`#${e.target.dataset.modal}`).style.display = 'block';
	$$('[data-modal]').forEach(x => x.addEventListener('click', f));
	f = e => {
		if (e.target === e.currentTarget) e.target.style.display = 'none'; };
	$$('.modal').forEach(x => x.addEventListener('click', f));
});

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');
});