import { Component, ViewChild, NgZone, OnInit, OnDestroy } from '@angular/core';
import { Nav, NavController, AlertController, MenuController } from 'ionic-angular';
import { GoogleAnalytics } from 'ionic-native';
import { Http, Headers } from '@angular/http';
import { Lipigas } from '../../lipigas';
import { Enrolar } from '../../pages/cursos/enrolar';
import { CursosListar } from '../../pages/cursos/listar';
import { Cumpleanos } from '../../pages/cumpleanos/cumpleanos';
import { AprobarPuntos } from '../../pages/aprobarpuntos/aprobarpuntos';
import { SolicitarPuntos } from '../../pages/solicitarpuntos/solicitarpuntos';
import { NoticiasComponent } from '../../pages/noticias/noticias';
import { Colaboradores } from '../../pages/colaboradores/colaboradores';
import { NoticiaService } from '../../pages/noticias/noticia.service';
import { Perfil } from '../../pages/perfil/perfil';
import { Login } from '../../pages/login/login';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import * as global from '../../global';

import { Globals } from '../perfil/global-vars';

@Component({
  selector: 'home',
  templateUrl: 'home.html',
  providers: [Lipigas, NoticiaService]
})

export class Home implements OnInit, OnDestroy {
  @ViewChild(Nav) nav: Nav;
  public perfil: any;
  public globals: any;
  mainPage: any = NoticiasComponent;
  public isAuth: boolean = false;
  public isPeople: boolean = false;
  public isOpen: boolean = false;
  public isOpenCursos: boolean = false;
  public isEnrolador: boolean = false;
  public me: any = null;

  constructor(public navCtrl: NavController, public http: Http, private service: Lipigas, private alertCtrl: AlertController, public menuCtrl: MenuController, private zone:NgZone) {

    this.perfil = JSON.parse(localStorage.getItem("LipigasPersonas"));
    this.globals = Globals;
    this.globals.avatar = 'url(' + this.perfil.avatar + ')';

    if (this.perfil.hasOwnProperty("roles")) {
      for (var i = 0; i < this.perfil.roles.length ; i++) {
        if (this.perfil.roles[i] == "enrolador") {
          this.isEnrolador = true;
        }
      }
    }

    // update perfil
    let headers = new Headers();
    headers.append('Authorization', 'Bearer '+this.perfil.token);

    this.http.get(global.api+'/perfil/'+this.perfil.rut, {headers: headers})
    .map(res => res.json())
    .subscribe(
      data => this.processUpdateProfileME(data,'ok'),
      err => this.processUpdateProfileME(err,'err')
    );
    // for layout
    this.perfil.firstname = this.perfil.nombres.split(' ');
    this.perfil.firstname = this.perfil.firstname[0];
    this.perfil.lastname = this.perfil.apellidos.split(' ');
    this.perfil.lastname = this.perfil.lastname[0];

    let formData = new FormData();
    formData.append('rut', this.perfil.rut);

    this.http.post(global.apipuntos+'/login', formData)
    .map(res => res.json())
    .subscribe(
      data => this.processLipiPuntosAPI(data,'ok'),
      err => this.processLipiPuntosAPI(err,'err')
    );
  }

  public pico() {
    console.log('pene');
  }
  public processUpdateProfileME(obj: any, res: string) {
    if (res == 'ok') {
      this.perfil.avatar = obj.avatar;
    }
  }

  public processLipiPuntosAPI(obj: any, res: string) {
    if (res == 'ok') {
      if (obj.Autorizador == true) {
        this.isAuth = true;
      }
      else {
        this.isPeople = true;
      }
      localStorage.setItem("LipigasPersonasToken", obj.token);
      localStorage.setItem("LipigasPersonasDisponible", obj.lipipuntos_ptos_disponibles);
      localStorage.setItem("LipigasPersonasUtilizado", obj.lipipuntos_ptos_utilizados);
    }
  }


  ngOnInit() {
    window['APP'] = window['APP'] || {};
    window['APP'].homeController = window['APP'].homeController || {};
    window['APP'].homeController.publicFunc = this.publicFunc.bind(this);
  }

  ngOnDestroy() {
    window['APP'].homeController.publicFunc = null;
  }
  publicFunc() {
    this.zone.run(() => this.privateFunc());
  }
  privateFunc() {
    console.log('Angular2 Outside call');
    this.nav.setRoot(CursosListar, {tipo: 1});
  }

  openSub() {
    if (this.isOpen == false) { this.isOpen = true; }
    else if (this.isOpen == true) { this.isOpen = false; }
  }
  openSubCursos() {
    if (this.isOpenCursos == false) { this.isOpenCursos = true; }
    else if (this.isOpenCursos == true) { this.isOpenCursos = false; }
  }
  goToLipipuntosHistory() {
    this.nav.setRoot(Colaboradores);
    this.menuCtrl.close();  
  }
  
  goToMiCuenta() {
    this.nav.setRoot(Perfil);
    this.menuCtrl.close();
  }
  goToNoticias() {
    this.nav.setRoot(NoticiasComponent);
    this.menuCtrl.close();
  }
  goToCumpleanos() {
    this.nav.setRoot(Cumpleanos);
    this.menuCtrl.close();
  }
  goToSolicitaLipipuntos() {
    this.nav.setRoot(SolicitarPuntos);
    this.menuCtrl.close();
  }
  goToAprobarLipipuntos() {
    this.nav.setRoot(AprobarPuntos);
    this.menuCtrl.close();
  }
  goToCursosPrescencial() {
    this.nav.setRoot(CursosListar, {tipo: 1});
    this.menuCtrl.close();
  }
  goToCursosElearning() {
    this.nav.setRoot(CursosListar, {tipo: 2});
    this.menuCtrl.close();
  }
  goToEnrolador() {
    this.nav.setRoot(Enrolar);
    this.menuCtrl.close();
  }
  goToLogout() {
    let conf = this.alertCtrl.create({
    title: 'Cerrar sesión',
      message: '¿Deseas cerrar tu sesión de Lipigas Personas?',
      buttons: [
        {
          text: 'Cancelar',
          role: 'cancel',
          handler: () => {
            
          }
        },
        {
          text: 'Salir',
          handler: () => {
            localStorage.removeItem("LipigasPersonas");
            this.menuCtrl.close();
            this.navCtrl.setRoot(Login);
          }
        }
      ]
    });
    conf.present();
  }


}
