import { Component, ViewChild, Input, ViewContainerRef } from '@angular/core';
import {} from 'googlemaps';
import * as moment from 'moment';
import { MapFlyOutComponent } from '../flyout/map/map-flyout.component';

@Component({
  selector: 'map-component',
  templateUrl: 'map.component.html',
  styles:['agm-map {height: 69vh;}']
})
export class MapComponent {
  // google maps zoom level
  
  @ViewChild('mapFlyOutComponent', {static: false}) mapFlyOutComponent: MapFlyOutComponent;
  
  @Input() filters: {
    locationFilter: number;
    statusFilter: number;
    typeFilter: number;
    startDate: moment.Moment;
    endDate: moment.Moment;
  } = <any>{};

  @Input() route: Array<any> = [];

  zoom: number = 8;
  markers: marker[] = [];
  // initial center position for the map
  lat: number = 34.044971;
  lng: number = -118.291243;
  map: any;
  pin: { path: string; fillColor: string; fillOpacity: number; strokeColor: string; strokeWeight: number; scale: number; labelOrigin: { x: number; y: number; }; };

  @Input() active: number;

  mapReady(event: any) {
    this.map = event;
    this.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById('getting_started_toggle'));
    
    this.pin = {
      path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
      fillColor: '#FFF',
      fillOpacity: 1,
      strokeColor: '#000',
      strokeWeight: 1,
      scale: 1,
      labelOrigin: { x: 0, y: -30 }};
      
      this.markers = [];
  }

  clickedMarker(label: string, index: number) {
    // console.log(`clicked the marker: ${label || index}`)
  }

  showFlyOut(): void {
    this.mapFlyOutComponent.loadFlyOut();
  }
}


// just an interface for type safety.
interface marker {
	lat: number;
	lng: number;
	label?: string;
  draggable: boolean;
  icon?: { path: string; fillColor: string; fillOpacity: number; strokeColor: string; strokeWeight: number; scale: number; labelOrigin: { x: number; y: number; } };
  driverName: string;
  orderId:string;
  eta:string;
}