import { Component, OnInit } from '@angular/core';

  @Component({
    selector: 'app-mappicker',
      styles: [`
      #map {
        width: 100%;
        height: 200px;
      }
    `],
    templateUrl: 'mappicker.component.html'
  })
  export class MappickerComponent implements OnInit{

      // initial center position for the map

    lat: number;
    lng: number;

    //Markers
    markers: marker[] = [];
    constructor() {
    }

      ngOnInit(){

          // Try HTML5 geolocation
          if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(this.setPosition.bind(this));
          } else {
            // Browser doesn't support Geolocation
            console.log("Not Supported");
          }
        }

    setPosition(position) {
      this.lat = position.coords.latitude;
      this.lng = position.coords.longitude;

      console.log(this.lat, this.lng);

       var newMarker = {
          name: 'Untitled',
          lat: position.coords.latitude,
          lng: position.coords.longitude,
          draggable: true
        }

      this.markers.push(newMarker);
    }
    // google maps zoom level
    zoom: number = 8;
    map;


    clickedMarker(marker: marker, index: number) {
      console.log(`clicked the marker:`+marker.name+ ` at the index `+index);
    }

    mapClicked($event: any) {

      console.log('Map clicked',$event.coords.lat, $event.coords.lng);
      var newMarker = {

      name: 'Untitled',
      lat: $event.coords.lat,
      lng: $event.coords.lng,
      draggable: true
      }

      this.markers.push(newMarker);
    }

    markerDragEnd(marker: any, $event: any) {
      console.log('dragEnd', marker, $event.coords.lat, $event.coords.lng);

      var updMarker = {
        name: marker.name,
        lat: parseFloat(marker.lat),
        lng: parseFloat(marker.lng),
        draggable: false
      }

      var newLat = $event.coords.lat;
      var newLng= $event.coords.lng;

      console.log(newLat+'  '+newLng);
    }
  }

  // just an interface for type safety.
  interface marker {
    name?: string;
    lat: number;
    lng: number;
    label?: string;
    draggable: boolean;
  }