class AEvent {
    constructor(id, eventTypeId, equipmentNumber, participantId, partyId, position, properties, sampleTime, shortName) {
        this.id = id;
        this.eventTypeId = eventTypeId;
        this.equipmentNumber = equipmentNumber;
        this.participantId = participantId;
        this.partyId = partyId;
        this.position = position;
        this.properties = properties;
        this.sampleTime = sampleTime;
        this.shortName = shortName;
        this.timeSinceStart;
        this.EventTypeName;
        this.color;
        this.graphic = null;
        this.type = "event";
        this.status = "not ready";

    }
    setEventTypeName() {
        switch (this.eventTypeId) {
            case 0:
                this.EventTypeName = "unknown"
                this.color = "brown";
                break;
            case 1:
                this.EventTypeName = "Hit"
                this.color = "green";
                break;
            case 10:
                this.EventTypeName = "RadioTvc"
                this.color = "greeN";
                break;
            case 11:
                this.EventTypeName = "Audio"
                this.color = "blue";
                break;
            case 12:
                this.EventTypeName = "Video"
                this.color = "yellow";
                break;
            case 13:
                this.EventTypeName = "HitIndirect"
                this.color = "orange";
                break;
            case 14:
                this.EventTypeName = "HitMine"
                this.color = "brown";
                break;
            case 15:
                this.EventTypeName = "HitN"
                this.color = "pink";
                break;
            case 16:
                this.EventTypeName = "HitC"
                this.color = "yellow";
                break;
            case 17:
                this.EventTypeName = "EnterDangerArea"
                this.color = "blue";
                break;
            case 18:
                this.EventTypeName = "LeaveDangerArea"
                this.color = "red";
                break;
            case 19:
                this.EventTypeName = "EnterMineArea"
                this.color = "orange";
                break;
            case 2:
                this.EventTypeName = "WeaponAssignment"
                this.color = "orange";
                break;
            case 20:
                this.EventTypeName = "LeaveMineArea"
                this.colro = "brown";
                break;
            case 21:
                this.EventTypeName = "CrossLocalBorderline"
                this.color = "orange";
                break;
            case 22:
                this.EventTypeName = "EnterFunctionalArea"
                this.color = "green";
                break;
            case 23:
                this.EventTypeName = "LeaveFunctionalArea"
                this.color = "yellow"
                break;
            case 24:
                this.EventTypeName = "EnterNuclear"
                break;
            case 25:
                this.EventTypeName = "LeaveNuclear"
                break;
            case 26:
                this.EventTypeName = "CrossGlobalBorderline"
                this.color = "orange";
                break;
            case 27:
                this.EventTypeName = "HitB"
                break;
            case 3:
                this.EventTypeName = "BiteMessage"
                this.color = "red";
                break;
            case 4:
                this.EventTypeName = "FireEvent"
                this.color = "blue";
                break;
            case 5:
                this.EventTypeName = "HitBuilding"
                this.color = "green";
                break;
            case 6:
                this.EventTypeName = "Manipulation"
                this.color = "blue";
                break;
            case 7:
                this.EventTypeName = "CameraAudio"
                this.color = "green";
                break;
            case 8:
                this.EventTypeName = "CameraVideo"
                this.color = "yeollow";
                break;
            case 9:
                this.EventTypeName = "RadioCnr"
                this.color = "red";
                break;
            case 28:
                this.EventTypeName = "FriendlyFire"
                break;
            case 100:
                this.EventTypeName = "EquipmentErrorReport"
                break;
            case 112:
                this.EventTypeName = "EmergencyCall"
                break;
            default:
                this.EventTypeName = "none"
                this.color = "pink";
                break;
        }
    }
}
var eventLayer = null;
var ipadresse = "localhost:";
var port = "7300";
var objArr = [];
var Selects = [];

window.onload = function () {
    getPorts();
}
function getPorts() {
    var ports = [];
    if ("WebSocket" in window) {
        {
            exampleSocket = new WebSocket("ws://" + ipadresse + port) //connected standartmäßig auf den port 7300
            document.getElementById("ipadresse").value = "";
            document.getElementById("ipadresse").value = ipadresse + port;
        }
        exampleSocket.onopen = function () { //ist die Verbindung hergestellt so wird eine Portabfrage an den port 7300 geschickt
            document.getElementById("Serverconnect").innerHTML = "Server: connected";
            document.getElementById("Serverconnect").style.color = "green"
            sendMsg();//Anfrage aller Übungen
        };
        exampleSocket.onmessage = function (event) { //filtert die Nachrichten und erstellt ein dropdown basierend auf den erhaltenen daten
            var choices = "";
            choices += "<option value=\"\" selected>Übungen</option>"
            msg = JSON.parse(event.data);
            ports = msg.data;
            ports.forEach(obj => {
                obj.services.forEach(subObj => {
                    if (subObj.name === "ExerciseEventManagement") {
                        choices += "<option value=" + subObj.ports[0].number + ">Übung" + obj.exerciseId + "</option>";
                    }
                });
            });
            document.getElementById("selects").innerHTML += choices;
            require([
                "esri/Map",
                "esri/views/MapView",
                "esri/layers/TileLayer",
                "esri/layers/GraphicsLayer",
                "esri/geometry/Point",
                "dojo/domReady!",
            ],
                function (
                    Map,
                    MapView,
                    TileLayer,
                    GraphicsLayer,
                    Point
                ) {
                    map = new Map({
                    });

                    view = new MapView({
                        container: "mapDiv",
                        map: map,
                        center: 493069.7231922282 / 5878331.098702803,
                        scale: 1000
                    });

                    view.on("click", eventHandler); // für maus
                    function eventHandler(event) {
                        view.hitTest(event).then(getGraphics);
                        function getGraphics(response) {
                            let point = view.toMap({ x: response.screenPoint.x, y: response.screenPoint.y })
                            if (response.results.length > 0 && response.screenPoint.button === 0) {
                                currentGraphic = response.results[0];
                            } else if (response.results.length === 0 && response.screenPoint.button === 0) {
                                document.getElementById("newPosition").innerHTML = `neue Position: ${point.x} / ${point.y}`;
                                newPosition = {
                                    x: point.x,
                                    y: point.y
                                }
                            };
                        };
                    };

                    tile = new TileLayer({
                        url: "http://excgeo21.sl.defence-elec.de/arcgis/rest/services/Bremen/BremenHemelingenAerialGeoAmt_32632/MapServer"
                    });

                    tile.load().then(function () {
                        map.layers.add(tile);
                        eventLayer = new GraphicsLayer();
                        map.add(eventLayer);
                    })

                    var pt = new Point({
                        x: 493066.09059222677,
                        y: 5878370.0818853425,
                        spatialReference: 32632
                    });

                    view.center = pt;
                }
            );
        };
    }
    else {
        alert("WebSocket is NOT supported by your Browser!");
    }
}
function sendMsg() { //abfrage für alle ServicePortInformationen
    exampleSocket.send(JSON.stringify({
        type: "servicePortsInformationRequest",
        uuid: "7777",
    }));
}

function connect() { //wird aufgerufen sobald eine Übung ausgewählt wurd(dropdown)
    port = document.getElementById("selects").value;
    requestUrl = ipadresse.concat(port);
    document.getElementById("ipadresse").value = "";
    document.getElementById("ipadresse").value = ipadresse + port;
}

function sendRequest() {
    objArr = [];
    var date = Date.parse(document.getElementById("startDate").value) - (2 * 1000 * 60 * 60);
    var time = document.getElementById("startTime").value.split(':');
    time = (time[0] * 60 * 60 * 1000) + (time[1] * 60 * 1000);
    var timespan = document.getElementById("hours").value;
    timespan = parseInt(timespan);
    timespan += 1;
    timespan = timespan * 60 * 60 * 1000;
    startTime = date + time;
    endTime = startTime + timespan;
    var UrlPart = "/request?requestId=1&from=" + startTime + "&to=" + endTime;
    var checkboxes = document.getElementsByName('rqTypes');
    var checks = 0;
    for (var i = 0; i < checkboxes.length; i++) {
        if (checks === 0 && checkboxes[i].checked) UrlPart += "&eventTypeId="
        if (checks > 0 && checkboxes[i].checked) {
            UrlPart += ",";
        }
        if (checkboxes[i].checked) {
            UrlPart += checkboxes[i].value;
            checks++;
        }
    }
    requestUrl = ipadresse + port + UrlPart;
    connectToSelectedSocket();
}

function connectToSelectedSocket() {
    if ("WebSocket" in window) {
        {
            exampleSocket = new WebSocket("ws://" + requestUrl);
            document.getElementById("Serverconnect").innerHTML = "Server: not connected";
            document.getElementById("Serverconnect").style.color = "red"
        }
        exampleSocket.onopen = function () {
            document.getElementById("Serverconnect").innerHTML = "Server: connected";
            document.getElementById("Serverconnect").style.color = "green"
        };
        exampleSocket.onmessage = function (event) {
            var msg = JSON.parse(event.data);
            createEvents(msg);
        };
    }
    else {
        alert("WebSocket is NOT supported by your Browser!");
    }
}

function createEvents(events) {
    if (events.length != undefined) {
        events.forEach(evnt => {
            var event = new AEvent(evnt.id, evnt.eventTypeId, evnt.equipmentNumber, evnt.participantId, evnt.partyId, evnt.position, evnt.properties, evnt.sampleTime, evnt.shortName);
            objArr.push(event);
        });
    }
    formatObjs();
}

function formatObjs() {
    require([
        "esri/geometry/Point",
        "esri/geometry/projection",
        "esri/Graphic",
    ], function (Point, projection, Graphic) {
        projection.load().then(function () {
            objArr.forEach(obj => {
                if (obj.status == "not ready") {
                    obj.setEventTypeName();
                    let eventEsriP = new Point({
                        x: (obj.position.x * 180) / Math.PI,
                        y: (obj.position.y * 180) / Math.PI,
                    });
                    eventEsriP = projection.project(eventEsriP, getSpatialRefOut());

                    let eventS = {
                        type: "simple-marker",
                        color: obj.color,
                    };
                    let eventEventAttribs = {
                        id: obj.id,
                        eventTypeId: obj.eventTypeId,
                        equipmentNumber: obj.equipmentNumber,
                        participantId: obj.participantId,
                        partyId: obj.partyId,
                        positionX: obj.positionX,
                        positionY: obj.positionY,
                        positionZ: obj.positionZ,
                        properties: obj.properties,
                        shortName: obj.shortName,
                        EventTypeName: obj.EventTypeName,
                        type: obj.type
                    };

                    obj.graphic = new Graphic({
                        geometry: eventEsriP,
                        symbol: eventS,
                        attributes: eventEventAttribs,
                        popupTemplate: {
                            title: "Event",
                            content: [{
                                type: "fields",
                                fieldInfos: [{
                                    fieldName: "EventTypeName"
                                }, {
                                    fieldName: "id"
                                }, {
                                    fieldName: "equipmentNumber"
                                }, {
                                    fieldName: "participantId"
                                }, {
                                    fieldName: "partyId"
                                }, {
                                    fieldName: "positionX"
                                }, {
                                    fieldName: "positionY"
                                }, {
                                    fieldName: "positionZ"
                                }, {
                                    fieldName: "properties"
                                }, {
                                    fieldName: "shortName"
                                }, {
                                    fieldName: "eventTypeId"
                                }]
                            }],
                        }
                    });
                    obj.status = "ready";
                };
            });
            place();
        });
    });
};
function place() {
    console.log("placing");
    eventLayer.removeAll();
    Selects = [];
    var checkboxes = document.getElementsByName('rqTypes');
    checkboxes.forEach(checkbox => {
        if (checkbox.checked) {
            Selects.push(parseInt(checkbox.value));
        }
    });
    objArr.forEach(event => {
        console.log(event);
        if (Selects.includes(event.eventTypeId)) {
            console.log("hit");
            eventLayer.add(event.graphic);
        }
    });
}
function getSpatialRefOut() {
    var spatialOut = view.spatialReference;
    return spatialOut;
}
function getWkid() {
    var wkid = view.spatialReference.__accessor__.store._values.wkid;
    return (wkid);
}
function selectAll() {
    var checkboxes = document.getElementsByName('rqTypes');
    checkboxes.forEach(checkbox => {
        checkbox.checked = true;
    });
    place();
}
function deselectAll() {
    var checkboxes = document.getElementsByName('rqTypes');
    checkboxes.forEach(checkbox => {
        checkbox.checked = false;
    });
    place();
}