import { Component, ViewContainerRef, ViewChild, AfterViewInit } from '@angular/core';

import { AgEditorComponent } from 'ag-grid-ng2/main';
import * as L from 'leaflet';

@Component({
    selector: 'editor-cell',
    template: `
        <div class="md-select-panel map-container">
            <div id="mapId"></div>
        </div>
    `
})
export class MapEditorComponent implements AgEditorComponent, AfterViewInit {
    @ViewChild('container', {read: ViewContainerRef})
    public container;
    public item: Object = null;
    public data: Object[];
    private params: any;
    public map: L.Map;
    public icon: L.Icon;
    public status: boolean = false;
    ngAfterViewInit() {

    }

    agInit(params: any): void {
        this.params = params;
        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('mapId').setView([51.505, -0.09], 13);
        L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
        }).addTo(this.map);
        if(params.value != null){
            this.status = true;
            let options = {
                draggable:true,
                icon: this.icon,
            };
            let latLng = params.value.split(',');
            let marker = L.marker(new L.LatLng(latLng[0],latLng[1]),options);
            marker.on('dragend', this.onDraged.bind(this));
            this.map.addLayer(marker);
        }
        this.data = params.data || [];
        this.map.on('click', this.onMapClick.bind(this));
        console.log(this);
    }

    getValue(): any {
        return this.item;
    }

    isPopup(): boolean {
        return true;
    }

    setValue(item: Object): void {
        this.item = item;
    }

    onDraged(e){
        let marker = e.target;
        let position = marker.getLatLng();
        marker.setLatLng(new L.LatLng(position.lat, position.lng),{draggable:true});
        this.item = position.lat +','+ position.lng;
    }
    onClick(item: Object) {
        this.setValue(item);
        this.params.api.stopEditing();
    }

    onKeyDown(event): boolean {
        event.stopPropagation();
        return false;
    }

    onMapClick(e) {

        if(!this.status){
            let options = {
                draggable:true,
                icon: this.icon,
            };
            let marker = L.marker(e.latlng,options);
            this.item = e.latlng.lat +','+ e.latlng.lng;
            this.map.addLayer(marker);
            marker.on('dragend', this.onDraged.bind(this));
        }
    };
}