// Data State
var data = {
	listItems: []
};

// UI Template
var template = function () {

	// If there are no list items
	if (data.listItems.length < 1) return '<p><em>You do not have any list items yet. Try adding one with the form above.</em></p>';

	// If there are
	return '<ul>' + data.listItems.map(function (item) {
		return '<li>' + item + '</li>';
	}).join('') + '</ul>';

};

// Function to render the UI into the DOM
var render = function () {

	// Render the UI
	var list = document.querySelector('#list');
	if (!list) return;
	list.innerHTML = template();

	// Save to localStorage
	localStorage.setItem('list', JSON.stringify(data));

};

// Check for saved list items
var savedData = localStorage.getItem('list');
if (savedData) {
	data = JSON.parse(savedData);
}

// Render the UI
render();

/*!
 * Sanitize and encode all HTML in a user-submitted string
 * (c) 2018 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String} str  The user-submitted string
 * @return {String} str  The sanitized string
 */
var sanitizeHTML = function (str) {
	var temp = document.createElement('div');
	temp.textContent = str;
	return temp.innerHTML;
};

// Listen for form submissions
document.addEventListener('submit', function (event) {

	// Make sure the submitted form was for our list items
	if (!event.target.matches('#add-to-list')) return;

	// Stop the form from submitting
	event.preventDefault();

	// Get the list item
	var item = event.target.querySelector('#list-item');
	if (!item || item.length < 1) return;

	// Update the data and UI
	data.listItems.push(sanitizeHTML(item.value));
	render();

	// Clear the field and return to focus
	item.value = '';
	item.focus();

}, false);