import { Component, VERSION } from "@angular/core";
import '../styles.css';
// import '../../node_modules/leaflet/dist/leaflet.css';

import { ParameterFilter, Phenomenon, Station } from '@helgoland/core';
import { LayerOptions } from '@helgoland/map';
import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from 'leaflet';
// optional, to adapt leaflet markers

Marker.prototype.options.icon = icon({
	iconRetinaUrl: 'assets/img/marker-icon-2x.png',
	iconUrl: 'assets/img/marker-icon.png',
	shadowUrl: 'assets/img/marker-shadow.png',
	iconSize: [25, 41],
	iconAnchor: [12, 41],
	popupAnchor: [1, -34],
	tooltipAnchor: [16, -28],
	shadowSize: [41, 41]
  });


@Component({
    selector: "app-component",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
    // template: `
    //   <div>
    //     <h1>{{name}}</h1>
    //     <div>The number: {{x}}</div>
    //   </div>
    // `,
})
export class AppComponent {

    constructor() { }

    public name = 'Angular test ' + VERSION.major;
    x: number = 123;

    // public providerUrl = 'https://geo.irceline.be/sos/api/v2/';
    public providerUrl = 'https://geomon.geologie.ac.at/52n-sos-webapp/api/';

    public fitBounds: LatLngBoundsExpression = [[ 9.47996951665, 46.4318173285], [16.9796667823, 49.0390742051]];
    // public zoomControlOptions: L.Control.ZoomOptions = { position: 'topleft' };
    public avoidZoomToSelection = false;
    public baseMaps: Map<string, LayerOptions> = new Map<string, LayerOptions>();
    public overlayMaps: Map<string, LayerOptions> = new Map<string, LayerOptions>();
    public layerControlOptions: Control.LayersOptions = { position: 'bottomleft' };
    public cluster = false;
    public loadingStations: boolean;
    public stationFilter: ParameterFilter = {
        // phenomenon: '8'
    };
    public statusIntervals = false;
    public mapOptions: MapOptions = { dragging: true, zoomControl: false };

    private onStationSelected(station: Station) {
        console.log('Clicked station: ' + station.properties.label);
    }

    private onMapInitialized(newItem: string) {
        // alert(newItem);
      }
}