document.addEventListener('DOMContentLoaded',init,false);

let name, email, inus, depts, cookies, comments;

function init() {
	// get the dom objects one time
	name = document.querySelector('#name');
	email = document.querySelector('#email');
	inus = document.querySelector('#inus');
	depts = document.querySelectorAll('input[name=department]');
	cookies = document.querySelectorAll('input[name=cookie]');
	comments = document.querySelector('#comments');
	
	// listen for input on all
	let elems = Array.from(document.querySelectorAll('#mainForm input, #mainForm select, #mainForm textarea'));
	elems.forEach(e => e.addEventListener('input', handleChange, false));
	
	// do we have a cached form?
	let cached = getForm();
	if(cached) {
		name.value = cached.name;
		email.value = cached.email;
		inus.value = cached.inus;
		comments.value = cached.comments;
		if(cached.department) {
			depts.forEach(d => {
				if(d.value === cached.department) d.checked = true;
			});
		}
		if(cached.cookies) {
			cookies.forEach(c => {
				if(cached.cookies.includes(c.value)) c.checked = true;
			});
		}
	}
	
	// final bit, on submit, clear cache
	document.querySelector('#mainForm').addEventListener('submit', () => {
		window.localStorage.removeItem('form');
	}, false);
}


function handleChange(e) {
	
	console.log('handleChange');
	/*
	get all values and store
	first the easy ones
	*/
	let form = {};
	form.name = name.value;
	form.email = email.value;
	form.inus = inus.value;
	form.comments = comments.value;
	// either null or one
	depts.forEach(d => {
		if(d.checked) form.department = d.value;
	});
	// either empty array or some things
	form.cookies = [];
	cookies.forEach(c => {
		if(c.checked) form.cookies.push(c.value);
	});
	
	// now store
	saveForm(form);
}

function saveForm(form) {
	let f = JSON.stringify(form);
	window.localStorage.setItem('form', f);
}

function getForm() {
	let f = window.localStorage.getItem('form');
	if(f) return JSON.parse(f);
}