import { Component, OnInit, ElementRef, OnDestroy, ViewChild } from '@angular/core';
import { GoogleMap } from '@capacitor/google-maps';
import { environment } from 'src/environments/environment';
import { Location, Locations } from '../../interfaces/location';
import { MarkerEl } from '../../interfaces/marker';
@Component({
  selector: 'app-tracking',
  templateUrl: './tracking.component.html',
  styleUrls: ['./tracking.component.scss'],
})
export class TrackingComponent implements OnInit {

  @ViewChild('map') public mapEl: ElementRef<HTMLElement>;

  public map: GoogleMap;

  public heading: string = null;

  public description: string = null;

  public locationOptions = {
    header: 'Asia',
    subHeader: 'Select a country from the list',
    message: 'There\'s only three :)',
    translucent: true,
  };

  private markers: Array<MarkerEl> = [];

  private ids: Array<string> = [];

  constructor() {
    this.heading      = 'Select a country from the above menu';
    this.description  = 'Interact with the markers that are displayed for each selected country';
    setTimeout(async () => {
      await this.createMap();
    }, 500);
  }

  ionViewDidEnter() {
    debugger;
    setTimeout(async () => {
      await this.createMap();
    }, 500);
  }
  ngOnInit() {}
  /**
   * @private
   * @async
   * @method createMap
   * @description  Creates a GoogleMap instance which is rendered within the DOM
   * @returns {Promise<void>}
   * @memberof HomePage
   */
  private async createMap(): Promise<void> {
    this.map = await GoogleMap.create({
      id: 'google-map',
      element: this.mapEl.nativeElement,
      apiKey: environment.keys.googleMaps,
      forceCreate: true,
      config: {
        center: {
          lat: 1.0667172756631198,
          lng: 103.96214500683499
        },
        zoom: 15,
        // mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: true,
        disableDefaultUI: true
      }
    });
  }
}
