import L, { LatLng } from "leaflet";

export default class Tracking
{
    map: L.Map;
    popup = L.popup();
    msg: string;
    participant: L.Marker;
    popupLocation: L.LatLng;
    popupContent: HTMLElement;

    constructor(input: L.Map, obj: string, marker: L.Marker){
        this.map = input;
        var viewPos = new L.LatLng(53.0528064472226, 8.89412999153137);
        this.msg = obj;
        this.participant = marker;
        var runIcon = new L.Icon({
            iconUrl: 'img/marker-run.png',
            shadowUrl: 'img/marker-shadow.png',
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, 50],
            shadowSize: [0, 0]
        });
        var participant = new L.Marker(viewPos, {icon: runIcon}).on('click', this.onMarkerClick);
        this.popupLocation = new LatLng(0,0);
        this.popupContent = new HTMLElement();
        participant.addTo(this.map);
    }

    onMarkerClick()
    {
        this.popup
            .setLatLng(this.popupLocation)
            .setContent(this.popupContent)
            .openOn(this.map);
    }

    start()
    {
        console.log('<p class="message">Received: '+this.msg);

        var newjobj = JSON.parse(this.msg);
        console.log(newjobj);
        if(newjobj.data.header.equipmentNumber == Number((<HTMLInputElement>document.getElementById("equipmentNumber")).value)){
            var jsonConv = '{"1": "NaN", "lat": ' + newjobj.data.geoPosition.lat/(Math.PI/180) + ', "lng": ' + newjobj.data.geoPosition.lon/(Math.PI/180) + '}';
            var convlatlng = JSON.parse(jsonConv);

            this.participant.setLatLng( [convlatlng.lat, convlatlng.lng]);
            var markerlatlng = convlatlng
            markerlatlng.lat= convlatlng.lat+0.00002;
            this.popupLocation = markerlatlng;
            this.popupContent = document.createElement("<center>EquipmentNr: " + newjobj.data.header.equipmentNumber + "<br>"
                                                        + "BuildingID: " + newjobj.data.opsPosition.moutObjectId + "<br>"
                                                        +   "RoomID: " + newjobj.data.opsPosition.moutRoomId + "</center>");
            this.popup
                .setLatLng(this.popupLocation)
                .setContent(this.popupContent)
                .openOn(this.map);
        }
    }
}