import {
  Directive,
  ElementRef,
  EventEmitter,
  Inject,
  Input,
  OnDestroy,
  OnInit,
  Output,
  Renderer2
} from '@angular/core';
import {DOCUMENT} from '@angular/common';
import {LocationService} from './location.service';
import {DialogResponseType, DialogResponse, GeoPt, SearchBoxEvent} from '@maplander/types';
import {MatDialogRef} from '@angular/material';
import {LocationComponent} from '../location/location.component';

@Directive({
  selector: '[libLocation]'
})
export class LocationDirective implements OnInit, OnDestroy {

  @Output() addressSelected: EventEmitter<DialogResponse<SearchBoxEvent>>;
  @Input() currentLocation: GeoPt;
  @Input() dark: boolean;
  private _dialogLocationRef: MatDialogRef<LocationComponent, DialogResponse<SearchBoxEvent>>;

  constructor(
    @Inject(DOCUMENT) private _document: any,
    private _rendered: Renderer2,
    private _ref: ElementRef,
    private _location: LocationService
  ) {
    this.addressSelected = new EventEmitter<DialogResponse<SearchBoxEvent>>();
  }

  ngOnInit(): void {
    this._ref.nativeElement.addEventListener('focus', this.onEvents.bind(this));
    this._ref.nativeElement.addEventListener('keyup', this.onEvents.bind(this));
  }

  ngOnDestroy(): void {
    this._ref.nativeElement.removeEventListener('focus', this.onEvents.bind(this));
    this._ref.nativeElement.removeEventListener('keyup', this.onEvents.bind(this));
  }

  private openDialog(): void {
    if (this._dialogLocationRef) {
      return;
    }
    this._dialogLocationRef = this._location.open({
      location: this.currentLocation ? this.currentLocation : null,
      dark: this.dark
    });
    this._dialogLocationRef.afterClosed().subscribe((response: DialogResponse<SearchBoxEvent>) => {
      this._dialogLocationRef = null;
      if (response && response.code === DialogResponseType.ACCEPT) {
        this.addressSelected.emit(response);
      }
    });
  }

  private onEvents(): void {
    this._ref.nativeElement.blur();
    this.openDialog();
  }
}