import { Injectable, NgZone } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { MapsApiLoaderService } from '../../services';

declare var google: any;




/**
 * Wrapper class that handles the communication with the Google Maps Javascript
 * API v3
 */
@Injectable()
export class MapsApiWrapperService {

  mapa;
  infowindow;
  markers: any[] = [];
  initialCity = "BOGOTÁ, D.C.";
  offices: any[] = [];
  geocoder;
  personalMarker;

  private _map: Promise<any>;
  private _mapResolver: (value?: any) => void;

  constructor(private _loader: MapsApiLoaderService, private _zone: NgZone) {
    this._map =
      new Promise<any>((resolve: () => void) => { this._mapResolver = resolve; });
  }

  createMap(el: HTMLElement, mapOptions: any): Promise<void> {
    return this._loader.load().then(() => {

      //const map = new google.maps.Map(el, mapOptions);
      this.mapa = new google.maps.Map(el, mapOptions);
      this._mapResolver(<any>this.mapa);
      return;
    });
  }

  fillMarkers(element) {
    
    let lngLong = element['geometry']['coordinates'];

    let generalClass = this;
    this.geocoder = new google.maps.Geocoder();
    this.infowindow = new google.maps.InfoWindow();
    let marker = new google.maps.Marker({
      position: new google.maps.LatLng(lngLong[1], lngLong[0]),
      map: this.mapa,
      customInfo: element,
      animation: google.maps.Animation.DROP,
      title: element.address1,
      icon: '../../bdb-pin.svg'
    });

    marker.addListener('click', function () {
      console.log(this);
      generalClass.selectMarker(element, this);
    });

    //Set current position if browser gps api available
    /*  if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position){
            this.mapa.setCenter({lat: position.coords.latitude, lng: position.coords.longitude});
        });
    }*/

    this.markers.push(marker);


    //   google.maps.event.addListener(marker,'click',function() {
    //     var infowindow = new google.maps.InfoWindow({
    //       content:"Hello World!"
    //     });
    //   infowindow.open(this.mapa,marker);
    // });


    //console.log(this);


  }



  selectMarker(element, marker) {
    console.log(marker);
    this.selectOffice(element, true);
    //adjustScroll(element, marker);
  }


  selectOffice(element, fromList) {

    let marker = this.findMarkerByOffice(element);


    console.log("---------------x--------------");
    console.log(element['id']);
    console.log("---------------x--------------");



    //Put all markers without selection
    //- resetSelection();
    //Set current office as selected
    element.selected = true;
    //Close current info window of map
    this.infowindow.close();
    //Change content of info window to office selected
    this.infowindow.setContent(this.constructInfoDescription(element['properties']['description'].split('-')[0], element['properties']['address']));
    //- map.setCenter(marker.getPosition());
    //Change office selected
    //-  $scope.officeSelected = element;
    //-  $scope.selectedOffice = true;
    this.infowindow.open(this.mapa, marker);
    //Broadcast change to the view
    if (!fromList) {
      //$scope.$apply();
    }


  }



  constructInfoDescription(name, address) {
    let descriptionTemplate = '<div>' +
      '<h3>' + name + '</h3>' +
      '<p>' + address + '</p>' +
      '</div>';
    return descriptionTemplate;
  }

  getNativeMap(): Promise<any> { return this._map; }




  findMarkerByOffice(office) {



    for (let index = 0; index < this.markers.length; index++) {

      let objeto = this.markers[index].customInfo;

      if (objeto['id'] == office['id']) {
        console.log("---------------yyy--------------");
        console.log(this.markers[index]);
        console.log("---------------yyy--------------");
        return this.markers[index];
      }

    }



    // return $filter('filter')(markers, function (marker) {
    //     return marker.customInfo.id === office.id;
    // })[0];
  }



  //metodo para buscar las oficinas cercanas a las que el usuario esta buscando en texto
  searchOfficesNeartTo(customerKeyboardText, currentCity) {
    if (this.personalMarker){
        this.personalMarker.setMap(null);
    }
    let address = customerKeyboardText + " " + currentCity + ", Colombia";
    this.geocoder.geocode({
      'address': address
    }, function (results, status) {
      if (status === 'OK') {
        this.mapa.setCenter(results[0].geometry.location);
        this.personalMarker = new google.maps.Marker({
          map: this.mapa,
          position: results[0].geometry.location
        });
      }
    });

  };


  cleanData = function (){
    if(this.personalMarker){
        this.personalMarker.setMap(null);
    }
    this.markers.forEach(function(element){
        element.setMap(null);
    });
    this.markers = [];
}

}