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

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

    proto.setOptions = function (options) {
        this.apiUrl = options.apiUrl;
        this.previousValue = this.node.val();
    };

    proto.init = function () {
        var changeCallback = _.bind(this.numberOnChange, this);
        var allowedKeys = [
          8,  /* "Backspace" */
          46, /* "Delete" */
          35, /* End */
          36, /* Home */
          37, /* "ArrowLeft" */
          39  /* "ArrowRight" */
        ];
        this.node.on('keyup paste', _.debounce(changeCallback, 500)).on('keypress', function (event) {
            if (-1 !== _.indexOf(allowedKeys, event.keyCode)) {
                return;
            }
            if (event.charCode < 48 || event.charCode > 57) {
                event.preventDefault();
                event.stopPropagation();
            }
        });
    };

    proto.numberOnChange = function (event) {
        if (event.currentTarget.value.length != 9) {
            return;
        }
        var value = this.node.val();
        if (value == this.previousValue) {
            return;
        }
        this.previousValue = value;
        this.showLoading();
        var url = this.apiUrl + '/' + value + '/name';
        qs.ajax(url, {type: 'get'}, {qsShowLoading: false}).success(_.bind(this.onAjaxSuccess, this));
    };

    proto.showLoading = function () {
        this.get('bankName').prop('disabled', true);
    };

    proto.hideLoading = function () {
        this.get('bankName').prop('disabled', false);
    };

    proto.onAjaxSuccess = function (response) {
        if (response.status == 'success') {
            this.get('bankName').val(response.name);
        } else {
            this.get('bankName').val('');
        }
        this.hideLoading();
    };

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