import { Component, Input, Output, OnInit } from '@angular/core';
import * as L from 'leaflet';
@Component({
    selector: 'map-items',
    template:`
        <div class="map-items" [class.show]="show"> 
            <div id="mapItemsId"></div>
        </div>`,
    styleUrls: ['map-items.scss']
})

export class MapItemsComponent implements OnInit{
    @Input() position: string;
    public map: L.Map;
    public icon: L.Icon;
    public markersGroup: L.FeatureGroup;
    public show = false;
    ngOnInit(){
        // if(this.position != null){
        //     let options = {
        //         draggable:true,
        //         icon: this.icon,
        //     };
        //     let latLng = this.position.split(',');
        //     let marker = L.marker(new L.LatLng(parseInt(latLng[0]),parseInt(latLng[1])),options);
        //     this.map.addLayer(marker);
        //
        // }
    }

    showMap(){
        this.show = true;
        this.icon = L.icon({
            iconUrl: '/assets/icons/marker-icon.png',
            iconSize:     [25, 41], // size of the icon
            popupAnchor:  [-3, -76], // point from which the popup should open relative to the iconAnchor
        });
        this.map = L.map('mapItemsId').setView([51.505, -0.09], 13);
        L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
        }).addTo(this.map);
    }
    refreshMap(rows): void{
        if(this.markersGroup != null){
            this.map.removeLayer(this.markersGroup);
        }
        let options = {
            draggable:true,
            icon: this.icon,
        };
        let markers = [];
        rows.map((row)=>{
            if(row != null){
                let latLng = row.position.split(',');
                console.log(parseFloat(latLng[0]) +'  '+parseFloat(latLng[1]));
                markers.push(L.marker(new L.LatLng(parseFloat(latLng[0]),parseFloat(latLng[1])),options));
                //markers.addLayer(marker);
            }
        });
        this.markersGroup = new L.FeatureGroup(markers);
        this.map.addLayer(this.markersGroup);
    }
}