import { Component, ElementRef, EventEmitter, Input, NgZone, OnInit, Output, ViewChild } from '@angular/core';
import { Platform } from '@ionic/angular';
import { ModalBusinessPage } from '../../pages/modal-business/modal-business.page';
import { CityService } from '../../services/city.service';
import { CommsService } from '../../services/comms.service';
import { LocationApiService } from '../../services/location-api.service';
import { TranslateService } from '@ngx-translate/core';
import { UtilsService } from '../../services/utils.service';
import { Loader } from '@googlemaps/js-api-loader';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent implements OnInit {

  //-----------------------------------------------------inputs---------------------------------------------------------
  @Input() businesses: any = [];
  @Input() centerFirstMarker: object = {};
  @Input() showSearchField: Boolean = false;
  @Input() searchMarkerPosition: any;
  //----------------------------------------------------/inputs---------------------------------------------------------

  //-----------------------------------------outputs--------------------------------------------------------------------
  @Output() location: EventEmitter<any> = new EventEmitter<any>();
  @Output() errorGettingLocation: EventEmitter<any> = new EventEmitter<any>();
  //---------------------------------------END_outputs------------------------------------------------------------------

  height = '30vh';
  mapCenter;
  center;
  userPositionIcon = '../assets/img/user_location.png';
  userPosition: any;
  zoom: number = 17;
  searchText: string = '';

  @ViewChild('search')
  public searchElementRef: ElementRef;

  constructor(
    public platform: Platform,
    public commsService: CommsService,
    public cityProvider: CityService,
    private ngZone: NgZone,
    private locationApiService: LocationApiService,
    public translateService: TranslateService,
    private utilsService: UtilsService,
  ) {
  }

  ngOnChanges(changes: any) {
    if (changes.businesses && changes.businesses.currentValue && this.businesses.length && this.centerFirstMarker) {
      let address = this.businesses[0].address;
      this.mapCenter = {
        lat: Number(address.lat),
        lng: Number(address.long)
      }
      this.zoom = 13;
      this.height = '85vh';
      return;
    }
    if (changes.searchMarkerPosition && changes.searchMarkerPosition.currentValue) {
      this.searchText = this.searchMarkerPosition.direction;
      this.updateCenterMap(this.searchMarkerPosition.lat, this.searchMarkerPosition.lng);
    } else {
      this.getCurrentLocation();
    }


    this.zoom = 17;

    if (changes.showSearchField && changes.showSearchField.currentValue) {
      this.height = '23vh';
    }
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.configureSearchField();
  }

  configureSearchField() {
    if (this.showSearchField) {
      const loader = new Loader({
        apiKey: 'AIzaSyDv579f74i_47NZHBfdxAxprOsZ526iHVI',
        libraries: ['places'],
      });

      loader.load().then(() => {
        let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
        autocomplete.addListener("place_changed", () => {
          this.ngZone.run(() => {
            //get the place result
            let place: google.maps.places.PlaceResult = autocomplete.getPlace();
            //verify result
            if (place.geometry === undefined || place.geometry === null) {
              return;
            }

            let coords = place.geometry.location;
            this.updateCenterMap(coords.lat(), coords.lng());
          });
        });
      });
    }
  }

  async getCurrentLocation() {
    navigator.geolocation.getCurrentPosition(
      (resp) => {
        this.manageCurrentLocation(resp.coords.latitude, resp.coords.longitude);
      },
      (error) => {
        this.errorGettingLocation.emit(true);
        this.getPublicIpLocation();
      });
  }

  getPublicIpLocation() {
    this.locationApiService.getPublicIpLocation().subscribe(
      (resp) => {
        this.manageCurrentLocation(resp['latitude'], resp['longitude']);
      }
    );
  }

  manageCurrentLocation(lat, lng) {
    if (!this.userPosition) {
      this.userPosition = {
        lat: lat,
        lng: lng,
      };
    }

    this.updateCenterMap(lat, lng);
  }

  updateCenterMap(lat, lng) {
    this.mapCenter = {
      lat: Number(lat),
      lng: Number(lng)
    }
    this.searchMarkerPosition = this.mapCenter;
    this.outputLocation(this.mapCenter.lat, this.mapCenter.lng);
  }

  markerClicked(business) {
    this.commsService.presentPopup(ModalBusinessPage, business);
  }

  getIconUrl(business) {
    // if (business.image) {
    //   let businessImg = this.cityProvider._urlGallery + 'business/' + business.image;
    //   return businessImg;
    // }
    return '../assets/img/business_icon.png';
  }

  markerDragEnd($event) {
    this.searchMarkerPosition = {
      lat: $event.latLng.lat(),
      lng: $event.latLng.lng()
    }

    this.outputLocation($event.latLng.lat(), $event.latLng.lng());
  }

  outputLocation(lat, lng) {
    if (this.searchElementRef) {
      this.location.emit({ lat: lat, lng: lng, address: this.searchElementRef.nativeElement.value });
    }
  }

  getNumericMarkerPosition(address){
   return  {lat: Number(address.lat) , lng: Number(address.long)}
  }
}