import { Component, Inject, OnInit } from '@angular/core';
import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
import { ContactService } from '../../../../contact.service';
declare var google: any;
@Component({
  selector: 'app-noti-location',
  templateUrl: './noti-location.component.html',
  styleUrls: ['./noti-location.component.scss']
})
export class NotiLocationComponent implements OnInit {

 constructor(public dialogRef: MdDialogRef<NotiLocationComponent>,private errorDialog: MdDialog,
    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) {
      this.getDevice(data)

     }
show:boolean=false;
  ngOnInit() {

  }
  getDevice(data){
    console.log(data);
    
    this.contactService.post('/devices/searchByIMEI',{imei: data.did}).subscribe((res:any)=>{
      console.log(res);
      this.show=true
       var latlng = new google.maps.LatLng(res.last_location?res.last_location.lat:0, res.last_location?res.last_location.long:0);
     
    initialize(res[0])
    })

    function initialize(res) {
      var lat= res.last_location?res.last_location.lat:73.777147
      var long=res.last_location?res.last_location.long:18.602941

      const myOptions = {
        zoom:18,
        center: new google.maps.LatLng(18.602941, 73.777147),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      
       var map = new google.maps.Map(document.getElementById("map2") as HTMLElement, {
    center: { lat: lat, lng: long },
    zoom: 18,
  });
  var poiIcon="/assets/images/liveTrackIcons/ol.png"
  var poiData=[]
         poiData.push({
          "lat": lat,
          "lng": long
        });
        var poiImage = new google.maps.MarkerImage(poiIcon);
        var marker = new google.maps.Marker({
          position: poiData[0],
          map: map,
          icon: poiImage,
          title: res.Device_Name
        });
      // var map = new google.maps.Map(document.getElementById('map2'), myOptions);
      // console.log('mapmapmapmapmapmapmapmapmapmapmapmapmapmap',map);
    
      // var trafficLayer = new google.maps.TrafficLayer();
      // trafficLayer.setMap(map);
     
      // var zoomBar: any;
      // zoomBar = document.getElementById('myRange');
      // map.setZoom(map.getZoom());

    
      // zoomBar.value = map.getZoom();
  
      // zoomBar.oninput = function () {
      //   //console.log('zoomValue',map.getZoom());
      //   map.setZoom(parseInt(this.value));
      // }

      // google.maps.event.addListener(map, 'zoom_changed', function (event) {
      //   //console.log("Inside zoom in out function");
      //   if (zoomBar.value)
      //     zoomBar.value = map.getZoom();
      // });

       

    }
  }
}
