import {AfterViewInit, Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
import {MouseEvent} from '@agm/core/map-types';
import {SearchBoxDirective} from '../../directives/search-box/search-box.directive';
import {AddressService} from '../address/address.service';
import {DialogResponseType, Address, DialogResponse, GeoPt, LocationOptions, SearchBoxEvent} from '@maplander/types';
import {Utils} from '../../../utils/utils';

@Component({
  selector: 'lib-location',
  templateUrl: './location.component.html',
  styleUrls: ['./location.component.scss']
})
export class LocationComponent implements OnInit, AfterViewInit {
  public mapOptions: any;
  public clear: boolean;
  private _searchBox: SearchBoxDirective;
  private _result: SearchBoxEvent;

  constructor(
    @Inject(MAT_DIALOG_DATA) private _data: LocationOptions,
    private _dialogRef: MatDialogRef<LocationComponent>,
    private _addressDialog: AddressService
  ) {
    this._result = {
      address: new Address(),
      address_formatted: ''
    };
  }

  static formatAddress(address: Address, keepVisibility?: boolean): string {
    /**
     * - Address visible
     * Street #Ext Int. Lt Mz, Colony, PostalCode, Township, City, State, Country
     * - Address hidden
     * Colony, PostalCode, Township, City, State, Country
     * */
    let result = '';
    result += address.street ? `${address.street} ` : '';
    result += address.outdoorNumber ? `#${address.outdoorNumber} ` : '';
    result += address.interiorNumber ? `Int. ${address.interiorNumber} ` : '';
    result += address.mz ? `Mz ${address.mz} ` : '';
    result += address.lt ? `Lt ${address.lt} ` : '';
    if (keepVisibility && !address.visible) {
      result = '';
    }
    result += address.colony ? `${address.colony}, ` : '';
    result += address.postalCode ? `${address.postalCode}, ` : '';
    result += address.township ? `${address.township}, ` : '';
    result += address.city ? `${address.city}, ` : '';
    result += address.state ? `${address.state}, ` : '';
    result += address.country ? `${address.country}` : '';
    return result;
  }

  ngOnInit() {
    this.configGoogleMaps();
  }

  ngAfterViewInit(): void {
    if (this._data && this._data.location && this._data.location.latitude !== 0 && this._data.location.longitude !== 0) {
      this._result.address.location = this._data.location;
      this.mapOptions.center.lat = this._data.location.latitude;
      this.mapOptions.center.lng = this._data.location.longitude;
    } else {
      this._result.address.location = {
        latitude: Number(this.mapOptions.center.lat),
        longitude: Number(this.mapOptions.center.lng)
      };
    }
  }

  onMarkerDragEnd(event: MouseEvent): void {
    this.reverseGeoCode({latitude: event.coords.lat, longitude: event.coords.lng});
  }

  onSearchBoxStart(ev: SearchBoxDirective): void {
    this._searchBox = ev;
    this.reverseGeoCode(this._result.address.location);
  }

  onPlaceChanged(ev: SearchBoxEvent): void {
    this._result = ev;
    this.updateMap();
  }

  gps(): void {
    this._searchBox.gps();
  }

  clearInput(): void {
    this.clear = false;
    this._searchBox.clearInput();
  }

  accept(): void {
    this._addressDialog.open(this._result.address).afterClosed().subscribe((result: DialogResponse<Address>) => {
      if (result && result.code === DialogResponseType.ACCEPT) {
        this._result.address = result.data;
        this._result.address_formatted = LocationComponent.formatAddress(result.data);
        this._dialogRef.close({code: DialogResponseType.ACCEPT, data: this._result} as DialogResponse<SearchBoxEvent>);
      }
    });
  }

  public close(): void {
    this._dialogRef.close({code: DialogResponseType.CANCEL} as DialogResponse<SearchBoxEvent>);
  }

  private updateMap(): void {
    this.mapOptions.center.lat = this._result.address.location.latitude;
    this.mapOptions.center.lng = this._result.address.location.longitude;
    this.clear = true;
    this._searchBox.setValueInput(this._result.address_formatted);
  }

  private reverseGeoCode(location: GeoPt): void {
    this._searchBox.reverseGeoCode(location).subscribe((ev: SearchBoxEvent) => {
      this._result = ev;
      this.clear = true;
      this._searchBox.setValueInput(this._result.address_formatted);
    }, () => {
      this._searchBox.setValueInput('');
    });
  }

  private configGoogleMaps(): void {
    this.mapOptions = Utils.getDefaultConfigGoogleMaps();
    this.mapOptions.zoom = 16;
    if (this._data.dark) {
      this.mapOptions.styles = Utils.getDarkStylesGoogleMaps();
    } else {
      this.mapOptions.styles = Utils.getLightStylesGoogleMaps();
    }
  }

}