import { Component, OnInit } from '@angular/core';
import {Router, ActivatedRoute, Params} from '@angular/router';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import {ContactService} from '../contact.service';
declare var google: any;

@Component({
  selector: 'app-geofencing-view2',
  templateUrl: './geofencing-view2.component.html',
  styleUrls: ['./geofencing-view2.component.scss'],
  providers: [ContactService]
})
export class GeofencingView2Component implements OnInit {
  fs :any;
  ls:any;
  emailid:any;
  or:any;
  onn_time:any;
  min:any;
  corect_min:any;
  hr:any
  run(){
  
  }
  openNav() {
    /*  document.getElementById("myNav").style.width = "100%";
  */
     this.router.navigateByUrl("location");
  
  }
    constructor(private router: Router,private contactService:ContactService) {
   
     }
    logout(){
      this.router.navigateByUrl("login");
    }
    devi(){
      this.router.navigateByUrl("dashboard?_i="+window.localStorage.token);
  
    }
    soon(){
      this.router.navigateByUrl("const");
      
    }
    addgeo(){
      this.router.navigateByUrl("geofence-add");
    }
    geo(){
      this.router.navigateByUrl("geofencing");
      
    }
    Back(){
      this.router.navigateByUrl("geofencing");
    }

    draw(zzz,yyy){
      var map;
      var infoWindow;
      var GeoFencCoords = null
       GeoFencCoords = zzz.slice(0)
      var GeoName = yyy

      var q;
      //  console.log(GeoFencCoords)
      initMap(GeoFencCoords);
      function initMap(GeoFencCoords) {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: {lat: GeoFencCoords[0].lat, lng: GeoFencCoords[0].lng},
          mapTypeId: 'terrain'
        });
  

        // console.log("Inside Polygon");
          
        var bermudaTriangle = new google.maps.Polygon({
         
          paths: GeoFencCoords,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 3,
          fillColor: '#FF0000',
          fillOpacity: 0.35
        });
        bermudaTriangle.setMap(map);

        // Add a listener for the click event.
        bermudaTriangle.addListener('click', showArrays);
        infoWindow = new google.maps.InfoWindow;
        
      }

      /** @this {google.maps.Polygon} */
      function showArrays(event) {
      
        var vertices = this.getPath();

        var contentString = '<b>Geo Fence</b><br>' +
            'Name: ' + GeoName;

        infoWindow.setContent(contentString);
        infoWindow.setPosition(event.latLng);

        infoWindow.open(map);
      }
    }


    useridd:any;
    devicess:any;
    final:any;
    custtype:any;
    cust:boolean=false;

    ngOnInit() {
 
      this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
      this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
      this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
      this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
      this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
 
      if(this.custtype == true){
        this.cust = true;
      }
      this.contactService.getGeoFence(this.useridd).subscribe(
        
        data => {
          this.devicess = data 
     
          for(let i=0;i< this.devicess.length;i++){
           let  cordin = [];
           
            let a = this.devicess[i].geofence.coordinates;
           
            for(let k=0;k<a.length;k++){
            let b ={
            lat : a[k][0],
            lng : a[k][1]
            }
            cordin.push(b);
            }  
            // console.log(cordin);
            this.draw(cordin, this.devicess[i].geoname);
            
          }
  
        });
    } 
  
  }
  
  
