/**
 * The KitchenSink view
 *
 * The main viewport.  Displays the login button.
 * When the login button is tapped we call
 *
 * KitchenSink.provider.authorizeApp which initiates the oauth login.
 *
 * @extends Ext.Panel
 */
KitchenSink.views.KitchenSink = Ext.extend(Ext.Panel, {
    id: 'viewport',
    layout: 'card',
    cardSwitchAnimation: 'slide',
    fullscreen: true,
    
    authScope: 'TL,DC,WAP,SMS,MMS,PAYMENT',

    // This function is run when initializing the component
    initComponent: function() {

        var self = this; // We need a reference to this instance for use in callbacks

        // The first page is the Login screen

        this.items = [{
            dockedItems: [{ xtype: 'toolbar', dock: 'top', title: 'Login' }],
            layout: {
                type: 'vbox', // Child items should be laid our vertically
                align: 'center' // Align child items from the start fo the container
            },
            items: [
                { xtype: 'spacer' },
                {
                    xtype: 'button', // Create a 'Button' component
                    text: 'Login', // Make the text of the Button component 'Login'
                    style: 'margin-bottom: 10px;',

                    // Run when the button is pressed
                    handler: self.loginHandler,
                    scope: self
                },
                { xtype: 'spacer' }
            ]
        }];

        // This should always be called as the last item in the 'initComponent' method.
        // It ensures that superclass initComponent methods are also called
        KitchenSink.views.KitchenSink.superclass.initComponent.apply(this, arguments);
    },

    listeners: {
        cardswitch: function(container, newCard, oldCard, index) {
            if (index == 0) {
                oldCard.destroy();
            }
        }
    },

    loginHandler: function() {

        var self = this;

/*
   Skip oauth for debugin.     
        self.add({xtype: 'attApiList'});
        self.setActiveItem(1, false);

*/
console.log("authorizing using scope", self.authScope);

        KitchenSink.provider.isAuthorized(self.authScope, {
          
           success: function() {
                // On successful authorisation, proceed to the next page

                console.log("arguments", arguments);
                self.add({xtype: 'attApiList'});
                self.setActiveItem(1, false);
                self.remove(0);
                KitchenSink.provider.removeIframe();
            },
            failure: function() {
              console.log("failure arguments", arguments);
              
                // Ask the user to login and authorize this application to process payments.
                // This will pop up an AT&T login followed by an authorisation screen.
                KitchenSink.provider.authorizeApp(self.authScope, {
                    success: function() {
                        // On successful authorisation, proceed to the next page

                        console.log("arguments", arguments);
                        self.add({xtype: 'attApiList'});
                        self.setActiveItem(1, false);
                        self.remove(0);
                        KitchenSink.provider.removeIframe();
                    },
                    failure: function() {
                      console.log("failure arguments", arguments);
                        KitchenSink.provider.removeIframe();
                    }
                });
              
            }
          
          
        })

      
        
    },


});

Ext.reg('attKitchenSink', KitchenSink.views.KitchenSink);