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

let $saveBtn, $firstname, $lastname, $email, $key, $table;
let db;

async function init() {
	db = await initDb();
	$saveBtn = document.querySelector('#saveBtn');
	$saveBtn.addEventListener('click', saveContact, false);
	
	$firstname = document.querySelector('#firstname');
	$lastname = document.querySelector('#lastname');
	$email = document.querySelector('#email');
	$key = document.querySelector('#key');
	$table = document.querySelector('#contactsTable tbody');
	
	renderContacts();
}

// TODO: Validation
async function saveContact(e) {
	e.preventDefault();

	let contact = {
		firstname: $firstname.value,
		lastname: $lastname.value, 
		email: $email.value
	};
	
	if($key.value) contact.id = parseInt($key.value,10);
	console.log(contact);
	await persistContact(contact);
	
	$firstname.value = '';
	$lastname.value = '';
	$email.value = '';
	$key.value = '';
	
	renderContacts();
}

async function renderContacts() {
	let contacts = await getContacts();
	let s = '';
	contacts.forEach(c => {
			s += `
			<tr>
			<td>${c.lastname}</td>
			<td>${c.firstname}</td>
			<td>${c.email}</td>
			<td><button data-key="${c.id}" class="edit">Edit</button> <button data-key="${c.id}" class="delete">Delete</button></td>
			</tr>`;
	});
	$table.innerHTML = s;

	let buttons = document.querySelectorAll('td button.edit');
	buttons.forEach(b => {
		b.addEventListener('click', editContact, false);
	});
	
	buttons = document.querySelectorAll('td button.delete');
	buttons.forEach(b => {
		b.addEventListener('click', deleteContact, false);
	});
	
}

async function editContact(e) {
	let key = parseInt(e.target.dataset.key,10);
	let contact = await getContact(key);
	$firstname.value = contact.firstname;
	$lastname.value = contact.lastname;
	$email.value = contact.email
	$key.value = contact.id;
}

async function deleteContact(e) {
	let key = parseInt(e.target.dataset.key,10);
	await removeContact(key);	
	renderContacts();
}

/*
I create the db, the store, and the index. When done, I return the db
*/
async function initDb() {
	let db = new Dexie('contacts_dexie');
	db.version(1).stores({contacts:'++id'})
	return db;	
}

async function persistContact(contact) {
	await db.contacts.put(contact);
}

async function getContacts() {
	return await db.contacts.toArray();
}

async function removeContact(key) {
	return await db.contacts.delete(key);
}

async function getContact(key) {
	return await db.contacts.get(key);
}