import { Component, AfterViewInit, OnChanges, SimpleChanges, EventEmitter, Input, Output } from '@angular/core';
import * as L from 'leaflet';
import { MarkerService } from '../services/marker.service';
import { DatasetApiService } from '../services/dataset-api.service';
import { BaseMapComponent } from './base-map.component';

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

@Component({
	selector: 'app-map',
	templateUrl: './map.component.html',
	styleUrls: ['./map.component.css'],
	// providers: [MarkerService]
	// providers: [
	// 	HelgolandServicesConnector
	// ]
})
// https://52north.github.io/helgoland-toolbox/classes/CachedMapComponent.html#source
export class MapComponent
	extends BaseMapComponent
	implements OnChanges, AfterViewInit {



	/**
	* @input The serviceUrl, where the selection should be loaded.
	*/
	@Input()
	public serviceUrl: string;

	// @Output()
	// public onSelected: EventEmitter<T> = new EventEmitter<T>();

	@Output()
	public onContentLoadingEvent: EventEmitter<boolean> = new EventEmitter();


	protected oldBaseLayer: L.Control.LayersObject = {};
	protected map: L.Map;
	protected zoomControl: L.Control.Zoom;
	protected markerFeatureGroup: L.FeatureGroup;

	// constructor() { }
	constructor(
		protected markerService: MarkerService,
		protected datasetApiService: DatasetApiService) {
		super();
	}
	// constructor(markerService: MarkerService) { 
	// 	this.markerService = markerService;
	// }

	ngAfterViewInit(): void {
		this.initMap();
		// this.markerService.makeCapitalMarkers(this.map);
		// this.markerService.makeCapitalCircleMarkers(this.map);
		this.datasetApiService.getStations('https://geomon.geologie.ac.at/52n-sos-webapp/api/')
			.subscribe((res) => {
				this.markerFeatureGroup = L.featureGroup();
				if (res instanceof Array && res.length > 0) {
					res.forEach((entry) => {
						//const marker = this.createDefaultGeometry(entry);
						// const marker = L.geoJSON(entry.geometry);
						const marker = L.geoJSON(entry.geometry, {
							pointToLayer: function (feature, latlng) {
								return L.circleMarker(latlng);
							}
						})
						if (marker) { this.markerFeatureGroup.addLayer(marker); }
					});
					this.markerFeatureGroup.addTo(this.map);
					// this.zoomToMarkerBounds(this.markerFeatureGroup.getBounds());
				} else {
					// this.onNoResultsFound.emit(true);
				}
				this.map.invalidateSize();

				this.onContentLoadingEvent.emit(false);
			});
		// this.createStationGeometries();
	}

	public ngOnChanges(changes: SimpleChanges) {
		super.ngOnChanges(changes);
		if (this.map && changes.statusIntervals) { this.drawGeometries(); }
	}

	protected drawGeometries() {
		this.onContentLoadingEvent.emit(true);
		// if (this.map && this.markerFeatureGroup) { this.map.removeLayer(this.markerFeatureGroup); }
		// if (this.statusIntervals && this.filter && this.filter.phenomenon) {
		//     this.createValuedMarkers();
		// } else {
		//     this.createStationGeometries();
		// }
	}

}