import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';

import { HomePage } from '../home/home'
import { DevicesPage } from '../devices/devices'
import { ConfigurationPage } from '../configuration/configuration'
import { ShareService } from '../../services/share/share';
import { VespotServiceProvider } from '../../providers/vespot-service/vespot-service';

import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker
} from '@ionic-native/google-maps';

@Component({
  selector: 'page-home',
  templateUrl: 'main.html'
})
export class Main {

  private devicesPage;
  private configurationPage;
  devices: any;
  rootDevice: any;
  public rootPosition: any;
  map: GoogleMap;

  constructor(private navCtrl: NavController,
  public shareService: ShareService,
  private googleMaps: GoogleMaps,
  private vespotService: VespotServiceProvider,
  public alertCtrl: AlertController) {
      this.devicesPage = DevicesPage;
      this.configurationPage = ConfigurationPage;
      this.devices = this.shareService.getDevices();
      this.rootDevice = this.shareService.getRootDevice();
      this.rootPosition = {};
  }

  ionViewWillEnter() {
    if(typeof this.shareService.getRootDevice() == "undefined") {
      this.navCtrl.push(DevicesPage);
    } else {
      this.getRootDevicePosition();
    }
  }

  getRootDevicePosition() {
    let auth = this.shareService.getAuthToken();
    this.vespotService.getPositionByDeviceId(auth, this.shareService.getRootDevice().id)
  	.subscribe(
        (data) => { // Success
			this.rootPosition = data[0];
            this.loadMap();
        },
        (error) =>{
			let alert = this.alertCtrl.create({
              title: 'Error servicio',
              subTitle: error,
              buttons: ['OK']
            });
            alert.present();
        }
      );
  }


  openDevicesPage() {
    this.navCtrl.push(DevicesPage);
  }

  openConfigurationPage() {}

  closeSession() {
	   this.navCtrl.setRoot(HomePage);
  }

  /**
  GOOGLE MAPS
  **/
  loadMap(){

    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904, // default location
          lng: -89.3809802 // default location
        },
        zoom: 18,
        tilt: 30
      }
    };

    this.map = this.googleMaps.create('map_canvas', mapOptions);

    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
    .then(() => {
      // Now you can use all methods safely.
      this.getPosition();
    })
    .catch(error =>{
      console.log(error);
    });

  }

  getPosition(): void{
    this.map.moveCamera({
      target: {
        lat: this.rootPosition.latitude, // default location
        lng: this.rootPosition.longitude // default location
      }
    });
    this.map.addMarker({
      title: this.shareService.getRootDevice().name,
      icon: 'blue',
      animation: 'DROP',
      position: {
        lat: this.rootPosition.latitude, // default location
        lng: this.rootPosition.longitude // default location
      }
    });
  }

}
