Ext.define('AM.twoFA.controller.wizard.TwoFATracking', {
    extend: 'Ext.app.Controller',
    config: {
        passwordCounter: 0,
        verifyCounter: 0
    },
    refs: [
        {
            ref: 'wizardModalContainer',
            selector: 'wizard-container'
        },
        {
            ref: '2faEnterpassword',
            selector: '2fa-enterpassword'
        }
    ],
    init: function() {
        this.control({
            'welcome-step': {
                activate: this.wizardContainerAfterrender
            },
            'login-welcome-step': {
                activate: this.wizardContainerAfterrender
            },
            '2fa-enterpassword': {
                activate: this.enterPasswordShown,
                afterrender: this.passwordAfterRender
            },
            'select-phone': {
                activate: this.selectPhoneActivate
            },
            'login-select-phone': {
                activate: this.selectPhoneActivate
            },
            'install-authenticator-app': {
                activate: this.installAppPageShown
            },
            'setup-authenticator-app': {
                activate: this.setupAppPageShown
            },
            'setup-authenticator-app button-graphite-blue': {
                click: this.setupAppPageVerifyClick
            },
            'enable-verification-step': {
                activate: this.verificationCodePageShown
            }
        });
    },
    _pageShowerTracker: function(page, extra){
        var params = {
            element: 'page',
            event: 'shown',
            page: page
        };
        Ext.apply(params, extra);
        this._wizardTracker(params);
    },
    _wizardTracker: function(params) {
        Ext.apply(params, {
            area: 'profile',
            'logic_block': '2fa_login',
            frame: 'wizard'
        });
        AM.uitracker.track(params);
    },
    _initCounters: function() {
        this.config.passwordCounter = 0;
        this.config.verifyCounter = 0;
    },
    wizardContainerAfterrender: function() {
        this._initCounters();
        this._pageShowerTracker('enable_2fa');
    },
    passwordAfterRender: function(view) {
        view.el.select('.js-next').on('click', this.passwordNextClick, this);
    },
    passwordNextClick: function() {
        this.config.passwordCounter++;
        var params = {
            page: 'enter_password',
            element: 'continue_button',
            event: 'click',
            value: this.config.passwordCounter
        };
        this._wizardTracker(params);
    },
    enterPasswordShown: function() {
        this._pageShowerTracker('enter_password');
    },
    selectPhoneActivate: function(){
        this._pageShowerTracker('phone_selection_2fa');
    },
    installAppPageShown: function(){
        this._pageShowerTracker('app_install_offer');
    },
    setupAppPageShown: function(){
        this._pageShowerTracker('qr_code_app_set_up');
    },
    setupAppPageVerifyClick: function() {
        this.config.verifyCounter++;
        var params = {
            page: 'qr_code_app_set_up',
            element: 'verify_button',
            event: 'click',
            value: this.config.verifyCounter
        };
        this._wizardTracker(params);
    },
    verificationCodePageShown: function() {
        this._pageShowerTracker('recovery_code_info');
    }
});