/**
 * @requires $ jQuery
 * @requires _ UnderscoreJS
 */
(function (/* Object */ ns) {
    "use strict";
    ns.NaicsCodes = function (options) {
        qs.FormNode.apply(this, arguments);
        this.setOptions(options);
        this.init();
    };

    var proto = ns.NaicsCodes.prototype = Object.create(qs.FormNode.prototype);

    proto.setOptions = function (options) {
        this.name = options.name;
        this.blockUiOptions = options.blockUiOptions || {};
        this.renderItem = _.template(options.chosenItemTemplate, {interpolate: /\{(.+?)\}/g});
    };

    proto.init = function () {
        var changeCallback = _.bind(this.filterOnChange, this);
        this.get('category').on('change', changeCallback);
        this.get('query').on('change keyup paste', _.debounce(changeCallback, 500));
        this.initChooseOptions();
        this.initChosenOptions();
        this.get('removeAllButton').on('click', _.bind(this.onRemoveAllClick, this))
    };

    proto.filterOnChange = function () {
        this.showLoading();
        var formData = Qs_Form.toObject(this.node.parents('form:first').get(0));
        var request = $.extend({}, formData, {
            action: 'renderFormPart',
            query: this.get('query').val(),
            categoryId: this.get('category').val(),
            formPart: this.name,
            originalAction: formData.action || ''
        });
        qs.ajax(document.href, request, {qsShowLoading: false}).success(_.bind(this.onAjaxSuccess, this));
    };

    proto.showLoading = function () {
        this.get('chooseContainer').addClass('loading').block(this.blockUiOptions);
    };

    proto.hideLoading = function () {
        this.get('chooseContainer').removeClass('loading').unblock(this.blockUiOptions);
    };

    proto.onAjaxSuccess = function (response) {
        var chooseElement = $('#' + this.get('chooseContainer').prop('id'), response.html);
        this.get('chooseContainer').html(chooseElement.html());
        this.hideLoading();
        this.initChooseOptions();
    };

    proto.initChooseOptions = function () {
        this.get('chooseContainer').find('input:checkbox').on('change', _.bind(this.chooseOptionOnChange, this));
    };

    proto.initChosenOptions = function () {
        this.get('removeButtons').on('click', _.bind(this.removeOnClick, this));
    };

    proto.initChosenOption = function (code) {
        $('[data-remove-btn=' + code + ']').on('click', _.bind(this.removeOnClick, this));
    };

    proto.chooseOptionOnChange = function (event) {
        var element = event.currentTarget;
        var code = element.value;
        if (element.checked) {
            if (this.get('chosenItems').length === 10) {
                alert('You can not choose more than 10 Vendor Classifications');
                element.checked = false;
                return false;
            }
            this.choose(code);
        } else {
            this.remove(code);
        }
        this.onChange();
    };

    proto.choose = function (code) {
        var title = $('[data-code-title=' + code + ']').html();
        this.get('chosenList').append(this.renderItem({code: code, title: title}));
        this.initChosenOption(code);
        $('[data-choose-item=' + code + ']').addClass('checked');
    };

    proto.remove = function (code) {
        $('[data-chosen-item=' + code + ']').remove();
        $('[data-choose-item=' + code + ']').removeClass('checked').find('input:checkbox').prop('checked', false);
    };

    proto.removeOnClick = function (event) {
        var code = $(event.currentTarget).data('remove-btn');
        this.remove(code);
        this.onChange();
        return false;
    };

    proto.onRemoveAllClick = function () {
        if (!confirm('Do you really want to remove all chosen codes?')) {
            return false;
        }
        var self = this;
        this.get('chosenItems').each(function () {
            self.remove($(this).data('chosen-item'));
        });
        this.onChange();
        return false;
    };

    proto.onChange = function () {
        this.get('paymentSummary').add(this.get('removeAllButton')).toggleClass('hidden', this.get('chosenItems').length === 0);
    };

})(qs.defineNS('app.license.form.element'));