import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Storage } from '@ionic/storage';
import { Device } from '@ionic-native/device';

import { LoginPage } from '../pages/login/login';
import { StreamPage } from '../pages/stream/stream';
import { SettingsPage } from '../pages/settings/settings';

import * as pnut from 'pnut-butter';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = StreamPage;

  pages: Array<{title: string, component: any, params: Object}>;

  scope: Array<string> = ['basic','stream','write_post','files'];

  constructor(public platform: Platform, public splashScreen: SplashScreen,
    private storage: Storage, private device: Device) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Timeline', component: StreamPage, params: {stream: 'personal'} },
      { title: 'Mentions', component: StreamPage, params: {stream: 'mentions'} },
      { title: 'Global', component: StreamPage, params: {stream: 'global'} },
      { title: 'Bookmarks', component: StreamPage, params: {stream: 'bookmarks'} },
      { title: 'Settings', component: SettingsPage, params: {}},
      { title: 'Logout', component: {}, params: {}},
    ];

  }

  initializeApp() {
    console.log('--- initializeApp ---');


    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.

      this.storage.get('timeline').then((val) => {
        if (val.length > 1) {
          this.initialPage(val);
        } else {
          console.log('ERR WHUT?');
        }
      }).catch(err => {
        this.initialPage('personal');
      });

      this.splashScreen.hide();
      // console.log('---');
      // console.log(this.device.platform);
      // console.log('---');
    });
  }

  initialPage(timeline) {
    this.storage.get('token').then((val) => {
      if (val.length > 1) {
        pnut.token = val;

        this.storage.get('scope').then((sval) => {
          if (JSON.stringify(sval) !== JSON.stringify(this.scope)) {
            this.nav.setRoot(LoginPage, {'scope': this.scope});
          } else {
            this.nav.setRoot(StreamPage, {stream: timeline});
          }
          // this.nav.setRoot(StreamPage, {stream: timeline});
        }).catch(err => {
          this.nav.setRoot(LoginPage, {'scope': this.scope});
        });
        // this.nav.setRoot(StreamPage, {stream: timeline});
      }
    }).catch(err => {
      console.log('ERROR: ' + err);
      this.nav.setRoot(LoginPage, {'scope': this.scope});
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    if (page.title === 'Logout') {
      // this.storage.remove('token');
      this.storage.clear();
      this.nav.setRoot(LoginPage, {'scope': this.scope});
    } else if (page.title === 'Settings') {
      this.nav.push(page.component, page.params);
    } else {
      this.nav.setRoot(page.component, page.params);
    }
  }

}
