/* global qs, qsa, $on, $parent, $delegate */

(function (window) {
    "use strict";

    /**
     * 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.$toggleAllInput = qs(".toggle-all");
        this.$toggleAll = qs(".toggle-all-label");
        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.textContent = 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._replaceContentWithHtml = function (element, html) {
        const parsedDocument = new DOMParser().parseFromString(html, "text/html");
        element.replaceChildren(...parsedDocument.body.childNodes);
    };

    View.prototype.render = function (viewCmd, parameter) {
        var self = this;
        var viewCommands = {
            showEntries: function () {
                self._replaceContentWithHtml(self.$todoList, self.template.show(parameter));
            },
            removeItem: function () {
                self._removeItem(parameter);
            },
            updateElementCount: function () {
                self._replaceContentWithHtml(self.$todoItemCounter, self.template.itemCounter(parameter));
            },
            clearCompletedButton: function () {
                self._clearCompletedButton(parameter.completed, parameter.visible);
            },
            contentBlockVisibility: function () {
                self.$main.style.display = self.$footer.style.display = parameter.visible ? "block" : "none";
            },
            toggleAll: function () {
                self.$toggleAll.checked = parameter.checked;
            },
            setFilter: function () {
                self._setFilter(parameter);
            },
            clearNewTodo: function () {
                self.$newTodo.value = "";
            },
            elementComplete: function () {
                self._elementComplete(parameter.id, parameter.completed);
            },
            editItem: function () {
                self._editItem(parameter.id, parameter.title);
            },
            editItemDone: function () {
                self._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 self = this;
        $delegate(self.$todoList, "li .edit", "blur", function () {
            if (!this.dataset.iscanceled) {
                handler({
                    id: self._itemId(this),
                    title: this.value,
                });
            }
        });

        $delegate(self.$todoList, "li .edit", "keypress", function (event) {
            if (event.keyCode === self.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 self = this;
        $delegate(self.$todoList, "li .edit", "keyup", function (event) {
            if (event.keyCode === self.ESCAPE_KEY) {
                this.dataset.iscanceled = true;
                this.blur();

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

    View.prototype.bind = function (event, handler) {
        var self = this;
        if (event === "newTodo") {
            $on(self.$newTodo, "change", function () {
                handler(self.$newTodo.value);
            });
        } else if (event === "removeCompleted") {
            $on(self.$clearCompleted, "click", function () {
                handler();
            });
        } else if (event === "toggleAll") {
            $on(self.$toggleAll, "click", function () {
                self.$toggleAllInput.click();
                handler({ completed: self.$toggleAllInput.checked });
            });
        } else if (event === "itemEdit") {
            $delegate(self.$todoList, "li label", "dblclick", function () {
                handler({ id: self._itemId(this) });
            });
        } else if (event === "itemRemove") {
            $delegate(self.$todoList, ".destroy", "click", function () {
                handler({ id: self._itemId(this) });
            });
        } else if (event === "itemToggle") {
            $delegate(self.$todoList, ".toggle", "click", function () {
                handler({
                    id: self._itemId(this),
                    completed: this.checked,
                });
            });
        } else if (event === "itemEditDone") {
            self._bindItemEditDone(handler);
        } else if (event === "itemEditCancel") {
            self._bindItemEditCancel(handler);
        }
    };

    // Export to window
    window.app = window.app || {};
    window.app.View = View;
})(window);
