import { radToDeg } from "./Helpers.js";

export class Equipment {
    
    constructor(equipmentNr, height, lat, lon, participantId) {
        this.equipmentNr = equipmentNr;
        this.height = height;
        this.lat = lat;
        this.lon = lon;
        this.participantId = participantId;
        this.partyId;
        this.typeId;
        this.partyColor;
        this.designator;
        this.tacticalIdentifier;
        this.marker;
        this.tracked = false;
        this.visible = false;
    }

    updatePosition(height, lat, lon){
        this.height = height;
        this.lat = lat;
        this.lon = lon;
    }

    toggleMarkerVisibility(map) {
        if (!this.visible) {
            this.marker.addTo(map);
            this.visible = true;
            document.getElementById(`icon-${this.equipmentNr}`).src = `./res/eye.svg`;
        } else {
            this.marker.remove();
            this.visible = false;
            document.getElementById(`icon-${this.equipmentNr}`).src = `./res/eye-slash.svg`;
        }
    }

    focusMarker(map){
        if (!this.visible) {
            this.toggleMarkerVisibility(map);
        }
        map.panTo([this.getLatDeg(), this.getLonDeg()]);
        }


    followMarker(map){
        if (!this.visible) {
            this.toggleMarkerVisibility(map);
        }
        map.panTo([this.getLatDeg(), this.getLonDeg()]);
    }

    //Setter
    setHeight(height) {
        this.height = height;
    }

    setLat(lat) {
        this.lat = lat;
    }

    setLon(lon) {
        this.lon = lon;
    }

    setPartyId(partyId) {
        this.partyId = partyId;
    }

    setTypeId(typeId){
        this.typeId = typeId;
    }

    setPartyColor(partyColor) {
        this.partyColor = partyColor;
    }

    setDesignator(designator) {
        this.designator = designator;
    }

    setTatcicalIdentifier (tacticalIdentifier) {
        this.tacticalIdentifier = tacticalIdentifier;
    }

    resetLatLng(followedEquipment) {
        this.marker.setLatLng([this.getLatDeg(),this.getLonDeg()]);
        if (followedEquipment == this.equipmentNr) {
            document.getElementById('infoOverlay').innerHTML = "Equipment <b>" + this.equipmentNr + "</b> Lat: " + this.getLatDeg().toFixed(5) + " Lon: " + this.getLonDeg().toFixed(5) + " Height: " + this.height.toFixed(2);
        }
    }

    setMarker(){
        
        // Marker

        const svgIcon = L.divIcon({
            html: `
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path id=svgIcon-${this.equipmentNr} transform="rotate(-45 25 25)" style="fill:${this.partyColor};stroke:#000;stroke-miterlimit:10; stroke-width:1" d="M7.7 7.7h34.6v34.6H9.7z"/></svg>`,
            className: "",
            iconSize: [34, 34],
            iconAnchor: [17, 4],
        });

        this.marker = L.marker([this.getLatDeg(), this.getLonDeg()], {
            icon: svgIcon
        });

        this.marker.bindTooltip(this.tacticalIdentifier, {
            className: 'tooltip',
            permanent: true, 
            direction : 'right',
            offset: [0, 0]
        });

        this.marker.bindTooltip(this.designator, {
            className: 'tooltip',
            permanent: true, 
            direction : 'left',
            offset: [0, 0]
        });

        this.marker.bindTooltip(this.designator + " | " + this.tacticalIdentifier, {
            className: 'tooltip',
            permanent: true, 
            direction : 'top',
            offset: [0, -6]
        });

    }
    //Getter
    getHeight(){
        return this.height;
    }

    getLat() {
        return this.lat
    }

    getLon() {
        return this.lon;
    }

    getPartyId() {
        return this.partyId;
    }

    getTypeId() {
        return this.typeId;
    }

    getLatDeg() {
        return radToDeg(this.lat);      //Lat in Gradmass
    }

    getLonDeg() {
        return radToDeg(this.lon);      //Lon in Gradmass
    }
    getMarker() {
        return this.marker;
    }
}