import { Component, OnInit, Input, Output, EventEmitter, ElementRef } from '@angular/core';
import { MapsApiWrapperService } from '../services/map-api-loader/maps-api-wrapper';
import { Subscription } from 'rxjs/Subscription';
import { MapSelectionService } from '../services/map-api-loader/map-selection.service';

@Component({
  selector: 'app-viewer-lab',
  templateUrl: './viewer-lab.component.html',
  styleUrls: ['./viewer-lab.component.css'],
  providers: [MapsApiWrapperService, MapSelectionService]
})
export class ViewerLabComponent implements OnInit {


  options: Array<any>;
  geometries: any;
  locationsLoaded: boolean;
  infoWindowContent;
  geocoder;
  geoText;
  cityName: string;
  customerName: string;
  creditName: string;
  loading = false;

  current: number;
  isListClosed = false;
  cityCodeTest: string = '11001';

  //send vars to list frame.
  initialCity = "BOGOTÁ, D.C.";
  offices: any[] = [];
  customerKeyboardText;



  @Input() longitude: number = 0;


  @Input() latitude: number = 0;

  @Input() zoom: number = 8;

  @Input() minZoom: number;


  @Input() maxZoom: number;

  @Output() mapReady: EventEmitter<any> = new EventEmitter<any>();

  private _observableSubscriptions: Subscription[] = [];


  constructor(private _elem: ElementRef,
    private _mapsWrapper: MapsApiWrapperService,
    private mapSelectionService: MapSelectionService) { }


  ngOnInit() {
    // todo: this should be solved with a new component and a viewChild decorator
    console.log('En ngOnInit() ****************');
    const container = this._elem.nativeElement.querySelector('.agm-map-container-inner');
    console.log('En ngOnInit(2) ****************', container);
    this._initMapInstance(container);
  }

  private _initMapInstance(el: HTMLElement) {

    console.log('En _initMapInstance() ****************', el);
    this._mapsWrapper.createMap(el, {
      center: { lat: this.latitude || 0, lng: this.longitude || 0 },
      zoom: this.zoom,
      minZoom: this.minZoom,
      maxZoom: this.maxZoom,

    })
      .then(() => this._mapsWrapper.getNativeMap())
      .then(map => this.mapReady.emit(map))
      .then(() => this.cargarOficinas());
    //this._mapsWrapper.fillMarkers(this.markersData);
  }

  /** @internal */
  ngOnDestroy() {
    // unsubscribe all registered observable subscriptions
    this._observableSubscriptions.forEach((s) => s.unsubscribe());
  }

  cargarOficinas() {
    // this.markersData.forEach(marker => {
    //   this._mapsWrapper.fillMarkers(marker);
    // });
    this.retrieveInitalOffices();
  }


  retrieveInitalOffices() {
    this.mapSelectionService.getCityByCode('11001').subscribe(city => {
      this.cityName = city.description.split('-')[0];
      this.initialCity = this.cityName;
      this.mapSelectionService.getOffices(this.cityCodeTest ? this.cityCodeTest : '11001').subscribe(list => {
        this.options = Array.from(list, x => {

          this._mapsWrapper.fillMarkers(x);
          this.offices.push(x);
          return Object.assign(x, { type: 'Feature' });
        });
        this.geometries = { type: 'FeatureCollection', features: this.options };

        this.locationsLoaded = true;
        //this.geoCode();
        // this.authService.setCurrentWindow('/map', { id: 18, resource: '/map' });

      }, error => {
        //this.errorModal.open(error);
      });
    }, err => {
      //this.errorModal.open(err);
    });
  }


  searchOfficesNeartTo(customerKeyboardText, currentCity) {
    this._mapsWrapper.searchOfficesNeartTo(customerKeyboardText, currentCity);
  }



}