import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { Map } from 'leaflet';
import L from 'leaflet';
import { GeoJSONRenderer } from './d3/map-canvas';
// import { FlowLayer } from './fresh-start/flow-layer';


// TODO: replace with generic
export enum FlowMapType {
  VoiceTraffic = 0,
  VoiceQuality = 1
}

@Component({
  selector: 'onguard-flow-map-v1',
  templateUrl: './flow-map.component.html',
  styleUrls: [
    './flow-map.component.scss',
    '../../../../../../../node_modules/leaflet/dist/leaflet.css'
  ]
})
export class FlowMapV1Component implements AfterViewInit {

  @Output() viewCalls: EventEmitter<string[]> = new EventEmitter<string[]>();
  public viewCallsProvided: boolean = false;

  private map: Map;
  private flowmapLayer;

  private _mapConfig = {};
  private _geoJson = null;
  private _filters = {
    inbound: true,
    outbound: true,
    internal: true
  };

  private overTooltip: boolean = false;

  public tooltipDataPoint: any;
  public tooltipShow: boolean = false;

  public options = {
    'zoom': 1,
    'minZoom': 2,
    'zoomSnap': 0,
    'zoomDelta': 0.25,
    // 'maxBounds': [
    //   [90, -180],
    //   [-90, 180]
    // ]
  };

  // @ViewChild('tooltipElement') tooltip;
  //@ViewChild();

  @ViewChild('map') mapElement: ElementRef<HTMLElement>;

  @Input() set geoJson(data) {
    this._geoJson = data;
    if (this.flowmapLayer) {
      this.flowmapLayer.setNewData(this._geoJson)
      if (this._geoJson.features.length > 0) {
        // @ts-ignore: Unreachable code error
        this.hasSites = true;
        this.map.fitBounds(this.flowmapLayer.getBounds(), { 'maxZoom': 6 });
      }
      else {
        this.hasSites = false;
      }

    }
  }

  @Input() set config(config) {
    this._mapConfig = config;
  }

  public hasSites: boolean = true;

  private canvasFlowMapLayer: any;

  // onMapReady(map: Map) {

  // }

  constructor(private changeDetectorRef: ChangeDetectorRef) {
    // @ts-ignore: Unreachable code error
    this.removeBorders();
  }

  ngAfterViewInit() {

    // Create Map
    this.map = L.map(this.mapElement.nativeElement, this.options).setView([37.8, -96], 4);

    // Add Map Tiles
    L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
      subdomains: 'abcd',
      maxZoom: 19
    }).addTo(this.map);



    var geojsonMarkerOptions = {
      radius: 8,
      fillColor: "#ff7800",
      color: "#000",
      weight: 1,
      opacity: 1,
      fillOpacity: 0.8
  };
  
  // const a = new FlowLayer(this._geoJson, this._mapConfig).addTo(this.map);
  // @ts-ignore
  // const abc = new FlowLayer(this._geoJson, {}).addTo(this.map);

    // Add Canvas Data Display Layer
    // @ts-ignore
    this.flowmapLayer = new GeoJSONRenderer(this._geoJson, this._mapConfig).addTo(this.map);
    this.flowmapLayer.setSliceTypesToDraw(this._filters);
    this.flowmapLayer.setAnimationDuration(5000);

  }

  private removeBorders() {
    (function () {
      // @ts-ignore
      var originalInitTile = L.GridLayer.prototype._initTile
      L.GridLayer.include({
        _initTile: function (tile) {
          originalInitTile.call(this, tile);

          var tileSize = this.getTileSize();

          tile.style.width = tileSize.x + 1 + 'px';
          tile.style.height = tileSize.y + 1 + 'px';
        }
      });
    })()
  }
}