import { Component, OnInit } from '@angular/core';
import {circle, icon, latLng, LatLng, Marker, marker, point, polygon, polyline, Polyline, tileLayer} from 'leaflet';
import {VttTraceWsService} from './vtt-trace-ws.service';
import {Feature, GeometryObject, LineString, MultiLineString, Point} from 'geojson';


// Utilise la librairie ngx-leaflet
// https://www.asymmetrik.com/ngx-leaflet-tutorial-angular-cli/
// https://github.com/Asymmetrik/ngx-leaflet
// Voir aussi la doc de Leaflet
// https://leafletjs.com/reference-1.3.0.html
// et le projet exemple ngx-leaflet

@Component({
  selector: 'app-vtt-trace',
  templateUrl: './vtt-trace.component.html',
  styleUrls: ['./vtt-trace.component.css'],
  providers: [VttTraceWsService]
})

export class VttTraceComponent implements OnInit {
  // Open Street Map and Open Cycle Map definitions
  LAYER_OCM = {
    id: 'opencyclemap',
    name: 'Open Cycle Map',
    enabled: true,
    layer: tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: 'Open Cycle Map'
    })
  };
  LAYER_OSM = {
    id: 'openstreetmap',
    name: 'Open Street Map',
    enabled: false,
    layer: tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: 'Open Street Map'
    })
  };

  // Values to bind to Leaflet Directive
  layersControlOptions = { position: 'bottomright' };
  baseLayers = {
    'Open Street Map': this.LAYER_OSM.layer,
    'Open Cycle Map': this.LAYER_OCM.layer
  };

  markers:  Marker[] = [];

  /*layers = [
    circle([ 46.95, -122 ], { radius: 5000 }),
    polygon([[ 46.8, -121.85 ], [ 46.92, -121.92 ], [ 46.87, -121.8 ]]),
    marker([ 46.879966, -121.726909 ]),
    polyline([
      [45.51, -122.68],
      [37.77, -122.43],
      [34.04, -118.2]
    ])
  ];*/
  layers = [];

  options = {
    layers: [
      tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
    ],
    zoom: 5,
    center: latLng(46, 2)
  };

  zoom: number;
  center: LatLng;

  constructor(private vttTraceWs: VttTraceWsService) { }

  ngOnInit() {
    this.getMarkers();
    this.addRoute();
    this.addRoute2();
  }

  private getMarkers() {
    const randosDesc: GeoJSON.FeatureCollection<Point> = this.vttTraceWs.getVttRandosDesc();
    randosDesc.features.forEach(x => this.addMarker(x));
  }

  addMarker(feature: Feature<Point>) {
    const newMarker = marker(
      [feature.geometry.coordinates[0], feature.geometry.coordinates[1]],
      {
        icon: icon({
          iconSize: [ 25, 41 ],
          iconAnchor: [ 13, 41 ],
          iconUrl: 'assets/marker-icon.png',
          shadowUrl: 'assets/marker-shadow.png'
        })
      }
    );

    console.log(feature.properties.name);
    //newMarker.bindPopup(feature.properties.name).openPopup();
    newMarker.on('click', this.markerOnClick)
    this.layers.push(newMarker);
  }

  markerOnClick(e) {
    console.log(e);
/*
    this.options = {
      layers: [
        tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
      ],
      zoom: 15,
      center: e.latlng
    };
*/
    this.zoom = 15;
    this.center = e.latlng;

    console.log(this.center);

    //const attributes = e.layer.properties;
    //console.log(attributes.name, attributes);
    // do some stuff…
    return false;
  }

  addRoute() {
    // create a red polyline from an array of LatLng points
    const route = polyline(this.vttTraceWs.getMockRoute1());
    this.layers.push(route);
  }

  addRoute2() {
    this.layers.push(polyline(this.vttTraceWs.getMockRoute2()));
  }

/*  private showRoute() {
      this.fitBounds(this.layers.getBounds(), {
        padding: point(24, 24),
        maxZoom: 12,
        animate: true
      });
  }*/

}
