var Backbone = require('backbone');
var _ = require('underscore');

var WizardView = Backbone.View.extend({
    events: {
        'click .nav a': 'handleNavClick'
    },

    initialize: function () {
        this.render();
    },

    render: function () {
        this.__steps = this.$el.find('.wizard-step');
        this.__nav = this.$el.find('.nav li');

        return this;
    },

    getCurrentStep: function () {
        for (var i = 0; i < this.__nav.length; i++) {
            if (this.__nav.eq(i).hasClass('active'))
                return i;
        }
        return 0;
    },

    isStepDisabled: function (i) {
        return !!this.__nav.eq(i).find('a').attr('disabled');
    },

    showPreviousStep: function () {
        var i = this.getCurrentStep();
        if (i - 1 < 0) {
            return;
        }
        if (this.isStepDisabled(i - 1)) {
            return;
        }
        this.showStep(i - 1);
    },

    showNextStep: function () {
        var i = this.getCurrentStep();
        if (i + 1 >= this.__nav.length) {
            return;
        }
        if (this.isStepDisabled(i + 1)) {
            return;
        }
        this.showStep(i + 1);
    },

    showStep: function (i) {
        this.__nav.removeClass('active');
        this.__steps.removeClass('active');
        this.__nav.eq(i).addClass('active');
        this.__steps.eq(i).addClass('active');
        this.trigger('change:page', i);
    },

    disableStep: function (i) {
        this.$('.wizard-nav a').eq(i).attr('disabled', 'disabled');
    },

    enableStep: function (i) {
        this.$('.wizard-nav a').eq(i).removeAttr('disabled');
    },

    handleNavClick: function (evt) {
        if ($(evt.target).attr('disabled')) {
            return;
        }

        for (var i = 0; i < this.__nav.length; i++) {
            if (evt.target.parentNode === this.__nav[i]) {
                break;
            }
        }

        this.showStep(i);
    }
});

module.exports = WizardView;