import { Component, ElementRef, Input, Output, EventEmitter, OnChanges, AfterViewInit } from '@angular/core';
import { BaseMapClass, IMapItem } from './baseMap';

declare const google: any;
declare const jQuery;

@Component({
  selector: 'rd-gmap',
  template: `
    <div id="gmap" style="width:100%" [style.height.px]="height"></div>
  `
})
export class GMap extends BaseMapClass implements OnChanges, AfterViewInit {
  constructor(elem: ElementRef) {
    super(elem);
    this.element = elem;
  }

  @Input("rd-change-gradient") changeGradient;
  @Output("rd-click") clickEvent: EventEmitter<any> = new EventEmitter<any>();

  private element;
  private map;
  private heatmap;
  private center = { lat: 0, lng: 0 };
  private container;

  ngAfterViewInit() {
    this.container = jQuery(this.element.nativeElement).find("#gmap");
    this.gMapReady();

    new google.maps.event.addDomListener(window, "resize", () => {
      let currentCenter = this.map.getCenter();
      google.maps.event.trigger(this.map, "resize");
      this.map.setCenter(currentCenter);
    });
  }

  ngOnChanges(changes) {
    if (!this.container) return;
    if ((changes.type && changes.type.currentValue) || (changes.data && changes.data.currentValue)) {
      this.gMapReady();
    }
    if (changes.changeGradient) {
      this.heatmap.set("gradient", this.heatmap.get("gradient") ? null : this.gradient);
    }
  }

  gMapReady() {
    this.center = this.setCenter(this.data, "gmap");
    this.setMap();
    this.setMapDisplay(this.type);
  }

  setMap() {
    this.map = new google.maps.Map(this.container[0], {
      zoom: 4,
      center: this.center,
      mapTypeControl: true,
      mapTypeControlOptions: {
        mapTypeIds: ['roadmap', 'hybrid']
      },
      fullscreenControl: true
    });
  }

  setPointMap() {
    for (let location of this.data as Array<IMapItem>) {
      let marker = new google.maps.Marker({
        position: { lat: location.lat, lng: location.lng },
        map: this.map
      });

      marker.addListener('click', (e) => {
        // this.map.setZoom(8);
        // this.map.setCenter(marker.getPosition());
        this.clickEvent.emit({ lat: e.latLng.lat(), lng: e.latLng.lng() });
      });

      marker.setMap(this.map);
    }
  }

  setAreaMap() {
    let polygon = new google.maps.Polygon({
      paths: this.data,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });

    // google.maps.event.addListener(this.map, 'click', (e) => {
    //   this.clickEvent.emit(google.maps.geometry.poly.containsLocation(e.latLng, polygon));
    // });

    polygon.addListener('click', (e) => {
      this.clickEvent.emit(null);
    });

    polygon.setMap(this.map);
  }

  setHeatMap() {
    let heatMapData = [];

    for (let local of this.data as Array<IMapItem>)
      heatMapData.push(
        { location: new google.maps.LatLng(local.lat, local.lng), weight: local.weight }
      );

    this.heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatMapData,
      map: this.map,
      opacity: 0.8,
      radius: 20
    });

    this.heatmap.setMap(this.map);
  }

  setRoutingMap() { }

  setLineMap() { }

  setGeoJson() { }

  gradient = [
    'rgba(0, 255, 255, 0)',
    'rgba(0, 255, 255, 1)',
    'rgba(0, 191, 255, 1)',
    'rgba(0, 127, 255, 1)',
    'rgba(0, 63, 255, 1)',
    'rgba(0, 0, 255, 1)',
    'rgba(0, 0, 223, 1)',
    'rgba(0, 0, 191, 1)',
    'rgba(0, 0, 159, 1)',
    'rgba(0, 0, 127, 1)',
    'rgba(63, 0, 91, 1)',
    'rgba(127, 0, 63, 1)',
    'rgba(191, 0, 31, 1)',
    'rgba(255, 0, 0, 1)'
  ]
}