import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HMGUtils } from 'src/app/hmg-common/hmg_utils';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { OfferDiscountService } from '../services/service';
declare var google;
@Component({
  selector: 'app-location',
  templateUrl: './location.component.html',
  styleUrls: ['./location.component.scss'],
})

export class LocationComponent implements OnInit {
  @ViewChild('map') mapContainer: ElementRef;
  locations: any = [];
  map: any;
  offerDetails: any;
  constructor(public hmgUtils: HMGUtils, public route: ActivatedRoute, public cs: CommonService) {
    this.route
      .params.subscribe(val => {
        setTimeout(() => {
          this.ionEnter();
        }, 100);
      });
  }
  ionEnter() {
    this.locations = this.cs.sharedService.getSharedData(OfferDiscountService.selected_offers, false);
    this.offerDetails = this.cs.sharedService.getSharedData(OfferDiscountService.selected_offers, false);
    this.displayMap();
  }
  ngOnInit() {

  }
  displayMap() {

    const map = new google.maps.Map(
      document.getElementById("map") as HTMLElement,
      {
        zoom: 10,
        center: { lat: 24.7136, lng: 46.6753 },
      }
    );

    this.setMarkers(map);

  }
  setMarkers(map) {

    for (let i = 0; i < this.locations.length; i++) {
      const loc = this.locations[i];
      const infoWindow = new google.maps.InfoWindow();
      var marker = new google.maps.Marker({
        position: { lat: loc.latitude, lng: loc.longitude },
        map,
        // icon: image,
        // shape: shape,
        title: this.offerDetails.Title,

      });
      marker.addListener("click", () => {
        this.cs.openLocation(loc.latitude, loc.longitude)
      });
    }
    this.hmgUtils.getCurrentLocation((resp) => {
      console.log(resp);
      if (resp) {
        const latLng = new google.maps.LatLng(resp.latitude, resp.longitude);
        const mapOptions = {
          center: latLng,
          zoom: 17,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          myLocation: true
        };

        this.map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions);
      };
    })
  }
}
