/*global define, $ */
'use strict';

define([
    'flight/lib/component',
    'text!templates/todo.html',
    'app/utils'
], function (defineComponent, todoTmpl, utils) {
    function todoList() {
        var ENTER_KEY = 13;
        var template = utils.tmpl(todoTmpl);

        this.attributes({
            destroySelector: 'button.destroy',
            toggleSelector: 'input.toggle',
            labelSelector: 'label',
            editSelector: '.edit'
        });

        this.renderAll = function (e, data) {
            this.$node.html('');
            data.todos.forEach(function (each) {
                this.render(e, { todo: each });
            }, this);
        };

        this.render = function (e, data) {
            if (e.type === 'dataTodoAdded' && data.filter === 'completed') {
                return;
            }

            this.$node.append(template(data.todo));
        };

        this.edit = function (e, data) {
            var $todoEl = $(data.el).parents('li');

            $todoEl.addClass('editing');
            this.select('editSelector').focus();
        };

        this.requestUpdate = function (e) {
            var $inputEl = $(e.currentTarget);
            var $todoEl = $inputEl.parents('li');
            var value = $inputEl.val().trim();
            var id = $todoEl.attr('id');

            if (!$todoEl.hasClass('editing')) {
                return;
            }

            $todoEl.removeClass('editing');

            if (value) {
                $todoEl.find('label').html(value);
                this.trigger('uiUpdateRequested',  { id: id, title: value });
            } else {
                this.trigger('uiRemoveRequested', { id: id });
            }
        };

        this.requestUpdateOnEnter = function (e, data) {
            if (e.which === ENTER_KEY) {
                this.requestUpdate(e, data);
            }
        };

        this.requestRemove = function (e, data) {
            var id = $(data.el).attr('id').split('_')[1];
            this.trigger('uiRemoveRequested', { id: id });
        };

        this.remove = function (e, data) {
            var $todoEl = this.$node.find('#' + data.id);
            $todoEl.remove();
        };

        this.toggle = function (e, data) {
            var $todoEl = $(data.el).parents('li');

            $todoEl.toggleClass('completed');
            this.trigger('uiToggleRequested', { id: $todoEl.attr('id') });
        };

        this.after('initialize', function () {
            this.on(document, 'dataTodoAdded', this.render);
            this.on(document, 'dataTodosLoaded', this.renderAll);
            this.on(document, 'dataTodosFiltered', this.renderAll);
            this.on(document, 'dataTodoToggledAll', this.renderAll);
            this.on(document, 'dataTodoRemoved', this.remove);

            this.on('click', { 'destroySelector': this.requestRemove });
            this.on('click', { 'toggleSelector': this.toggle });
            this.on('dblclick', { 'labelSelector': this.edit });

            this.$node.on('blur', '.edit', this.requestUpdate.bind(this));
            this.$node.on('keydown', '.edit', this.requestUpdateOnEnter.bind(this));

            // these don't work
            // this.on(this.attr.editSelector, 'blur', this.requestUpdate);
            // this.on('blur', { 'editSelector': this.requestUpdate });

            this.trigger('uiLoadRequested');
        });
    }

    return defineComponent(todoList);
});