'use strict';
var helpers = require('./helpers');
var qs = helpers.qs;
var qsa = helpers.qsa;
var $on = helpers.$on;
var $parent = helpers.$parent;
var $delegate = helpers.$delegate;

module.exports = View;
/**
 * View that abstracts away the browser's DOM completely.
 * It has two simple entry points:
 *
 *   - bind(eventName, handler)
 *     Takes a todo application event and registers the handler
 *   - render(command, parameterObject)
 *     Renders the given command with the options
 */
function View(template) {
	this.template = template;

	this.ENTER_KEY = 13;
	this.ESCAPE_KEY = 27;

	this.$todoList = qs('.todo-list');
	this.$todoItemCounter = qs('.todo-count');
	this.$clearCompleted = qs('.clear-completed');
	this.$main = qs('.main');
	this.$footer = qs('.footer');
	this.$toggleAll = qs('.toggle-all');
	this.$newTodo = qs('.new-todo');
}

View.prototype._removeItem = function (id) {
	var elem = qs('[data-id="' + id + '"]');

	if (elem) {
		this.$todoList.removeChild(elem);
	}
};

View.prototype._clearCompletedButton = function (completedCount, visible) {
	this.$clearCompleted.innerHTML = this.template.clearCompletedButton(completedCount);
	this.$clearCompleted.style.display = visible ? 'block' : 'none';
};

View.prototype._setFilter = function (currentPage) {
	qs('.filters .selected').className = '';
	qs('.filters [href="#/' + currentPage + '"]').className = 'selected';
};

View.prototype._elementComplete = function (id, completed) {
	var listItem = qs('[data-id="' + id + '"]');

	if (!listItem) {
		return;
	}

	listItem.className = completed ? 'completed' : '';

	// In case it was toggled from an event and not by clicking the checkbox
	qs('input', listItem).checked = completed;
};

View.prototype._editItem = function (id, title) {
	var listItem = qs('[data-id="' + id + '"]');

	if (!listItem) {
		return;
	}

	listItem.className = listItem.className + ' editing';

	var input = document.createElement('input');
	input.className = 'edit';

	listItem.appendChild(input);
	input.focus();
	input.value = title;
};

View.prototype._editItemDone = function (id, title) {
	var listItem = qs('[data-id="' + id + '"]');

	if (!listItem) {
		return;
	}

	var input = qs('input.edit', listItem);
	listItem.removeChild(input);

	listItem.className = listItem.className.replace('editing', '');

	qsa('label', listItem).forEach(function (label) {
		label.textContent = title;
	});
};

View.prototype.render = function (viewCmd, parameter) {
	var that = this;
	var viewCommands = {
		showEntries: function () {
			that.$todoList.innerHTML = that.template.show(parameter);
		},
		removeItem: function () {
			that._removeItem(parameter);
		},
		updateElementCount: function () {
			that.$todoItemCounter.innerHTML = that.template.itemCounter(parameter);
		},
		clearCompletedButton: function () {
			that._clearCompletedButton(parameter.completed, parameter.visible);
		},
		contentBlockVisibility: function () {
			that.$main.style.display = that.$footer.style.display = parameter.visible ? 'block' : 'none';
		},
		toggleAll: function () {
			that.$toggleAll.checked = parameter.checked;
		},
		setFilter: function () {
			that._setFilter(parameter);
		},
		clearNewTodo: function () {
			that.$newTodo.value = '';
		},
		elementComplete: function () {
			that._elementComplete(parameter.id, parameter.completed);
		},
		editItem: function () {
			that._editItem(parameter.id, parameter.title);
		},
		editItemDone: function () {
			that._editItemDone(parameter.id, parameter.title);
		}
	};

	viewCommands[viewCmd]();
};

View.prototype._itemId = function (element) {
	var li = $parent(element, 'li');
	return parseInt(li.dataset.id, 10);
};

View.prototype._bindItemEditDone = function (handler) {
	var that = this;
	$delegate(that.$todoList, 'li .edit', 'blur', function () {
		if (!this.dataset.iscanceled) {
			handler({
				id: that._itemId(this),
				title: this.value
			});
		}
	});

	$delegate(that.$todoList, 'li .edit', 'keypress', function (event) {
		if (event.keyCode === that.ENTER_KEY) {
			// Remove the cursor from the input when you hit enter just like if it
			// were a real form
			this.blur();
		}
	});
};

View.prototype._bindItemEditCancel = function (handler) {
	var that = this;
	$delegate(that.$todoList, 'li .edit', 'keyup', function (event) {
		if (event.keyCode === that.ESCAPE_KEY) {
			this.dataset.iscanceled = true;
			this.blur();

			handler({id: that._itemId(this)});
		}
	});
};

View.prototype.bind = function (event, handler) {
	var that = this;
	if (event === 'newTodo') {
		$on(that.$newTodo, 'change', function () {
			handler(that.$newTodo.value);
		});

	} else if (event === 'removeCompleted') {
		$on(that.$clearCompleted, 'click', function () {
			handler();
		});

	} else if (event === 'toggleAll') {
		$on(that.$toggleAll, 'click', function () {
			handler({completed: this.checked});
		});

	} else if (event === 'itemEdit') {
		$delegate(that.$todoList, 'li label', 'dblclick', function () {
			handler({id: that._itemId(this)});
		});

	} else if (event === 'itemRemove') {
		$delegate(that.$todoList, '.destroy', 'click', function () {
			handler({id: that._itemId(this)});
		});

	} else if (event === 'itemToggle') {
		$delegate(that.$todoList, '.toggle', 'click', function () {
			handler({
				id: that._itemId(this),
				completed: this.checked
			});
		});

	} else if (event === 'itemEditDone') {
		that._bindItemEditDone(handler);

	} else if (event === 'itemEditCancel') {
		that._bindItemEditCancel(handler);
	}
};