class Footprint {
    constructor(name, id, path, refPoint) {
        this.name = name;
        this.id = id;
        this.path = path;
        this.refPoint = refPoint;
        this.type = "footprint";
        this.graphic = null;
        this.status = "not ready";
    }

}
class MountingPoint {
    constructor(name, id, levelId, objId, position, roomId, supportedAsset) {
        this.name = name;
        this.id = id;
        this.levelId = levelId;
        this.objId = objId;
        this.position = position; //wird als positionsObjekt übergeben. Bezieht sich auf Referenzpunkt des zugehörigen Gebäudes
        this.roomId = roomId;
        this.supportedAsset = supportedAsset;
        this.type = "mountingPoint";
        this.graphic = null;
        this.status = "not ready";
    }
}
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;
        }
    }
}
class layer {
    constructor(name) {
        this.name = name;
        this.ids = [];
        this.layer = null;
    }
}




var ipadresse = "192.168.133.140:";
var port = "2080";
var layerArr = [];
var objArr = [];
var AssetTypeArr = [];

window.onload = function () {
    var selects = document.getElementsByName("layerSelect")
    selects.forEach(selectable => {
        selectable.checked = false;
    });
    getEssentials();
}
// Schritt 1 - Essentials werden geladen (Alle Objekte die für jede Übung relevant sind)
function getEssentials() {
    if ("WebSocket" in window) {
        {
            var 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"
            exampleSocket.send(JSON.stringify({
                type: "getEssentials",
                uuid: "UUID",
                data: {
                    oneReply: true
                }
            }));
        };
        exampleSocket.onmessage = function (event) {
            var msg = JSON.parse(event.data);
            var essentialArrays = msg.data;
            AssetTypeArr = essentialArrays.AssetTypes;
            createObjects(essentialArrays);
        };
    }
    else {
        alert("WebSocket is NOT supported by your Browser!");
    }
}
//Schritt 2 - Erstellen von Objekten der Essentials
function createObjects(essentialArrays) {
    var levelCompareArr = [];
    require([
        "esri/layers/GraphicsLayer",
    ],
        function (
            GraphicsLayer
        ) {
            //Buildings(footPrints)
            essentialArrays.Buildings.forEach(building => {
                if (building.pathGeo.length <= 0) building.pathGeo = null;
                var footprintObj = new Footprint(building.designation, building.id, building.pathGeo, building.refPoint);
                objArr.push(footprintObj);
            });
            //Layer für Levels
            essentialArrays.Levels.forEach(level => {
                if (!levelCompareArr.includes(level.designation)) {
                    var layerObj = new layer(level.designation);
                    layerObj.ids.push(level.id);
                    layerObj.layer = new GraphicsLayer({});
                    layerArr.push(layerObj);
                    levelCompareArr.push(layerObj.name);
                } else {
                    layerArr.forEach(layer => {
                        if (layer.name === level.designation) {
                            layer.ids.push(level.id);
                        }
                    });
                }
            });
            var eventLayer = new layer("eventLayer");
            eventLayer.layer = new GraphicsLayer({});
            layerArr.push(eventLayer);
            var outdoorLayer = new layer("outdoorLayer");
            outdoorLayer.layer = new GraphicsLayer({});
            outdoorLayer.ids.push(-1);
            layerArr.push(outdoorLayer);
            var footprintLayer = new layer("footprintLayer");
            footprintLayer.layer = new GraphicsLayer({});
            layerArr.push(footprintLayer);
            //Mountingpoints
            essentialArrays.MountingPoints.forEach(mountingP => {
                var mountingPointObj = new MountingPoint(mountingP.designation, mountingP.id, mountingP.levelId, mountingP.objectId, mountingP.position3d, mountingP.roomId, mountingP.supportedAssetTypeIds[0]);
                objArr.push(mountingPointObj);
            });
            port = 7300;
            getPorts();
        }
    )

};
function formatObjs() {
    require([
        "esri/geometry/Point",
        "esri/geometry/projection",
        "esri/Graphic",
    ], function (Point, projection, Graphic) {
        projection.load().then(function () {
            objArr.forEach(obj => {
                switch (obj.type) {
                    case "footprint":
                        if (obj.status == "not ready") {
                            let footprintEsriP = new Point({
                                y: (obj.refPoint.lat * 180) / Math.PI,
                                x: (obj.refPoint.lon * 180) / Math.PI
                            });
                            footprintEsriP = projection.project(footprintEsriP, getSpataialRefOut());
                            obj.refPoint = footprintEsriP;
                            if (obj.path !== null) {
                                var x = 0;
                                obj.path.forEach(pathPoint => {
                                    esriPathPoint = new Point({
                                        y: (pathPoint.lat * 180) / Math.PI,
                                        x: (pathPoint.lon * 180) / Math.PI,
                                    });
                                    esriPathPoint = projection.project(esriPathPoint, getSpataialRefOut());
                                    obj.path[x] = [esriPathPoint.__accessor__.store._values.x, esriPathPoint.__accessor__.store._values.y];
                                    x++;
                                });
                            }
                            var polygon = {
                                type: "polygon",
                                rings: obj.path,
                                spatialReference: { wkid: getWkid() }
                            };
                            var fillSymbol = {
                                type: "simple-fill",
                                color: [227, 139, 79, 0.8],
                                outline: {
                                    color: [255, 255, 255],
                                    width: 1
                                }
                            };
                            var buildingAtr = {
                                BuildingName: obj.name
                            }
                            obj.graphic = new Graphic({
                                geometry: polygon,
                                symbol: fillSymbol,
                            });
                            obj.status = "ready";
                        }
                        break;
                    case "mountingPoint":
                        if (obj.status == "not ready") {
                            objArr.forEach(subObj => {
                                if (subObj.type === "footprint") {
                                    if (obj.objId === subObj.id && subObj.path != null) {
                                        obj.position.x += subObj.refPoint.__accessor__.store._values.x;
                                        obj.position.y += subObj.refPoint.__accessor__.store._values.y;
                                    }
                                }
                            });
                            let mountingPointEsriP = new Point({
                                x: obj.position.x,
                                y: obj.position.y,
                                spatialReference: getSpataialRefOut()
                            });
                            let mountingPointS = {
                                type: "simple-marker",
                                color: "black",
                            }
                            let mountingPointEventAttribs = {
                                name: obj.name,
                                objectId: obj.objectId,
                                id: obj.id,
                                levelId: obj.levelId,
                                roomId: obj.roomId,
                                supportedAssets: obj.supportedAsset,
                            }
                            obj.graphic = new Graphic({
                                geometry: mountingPointEsriP,
                                symbol: mountingPointS,
                                attributes: mountingPointEventAttribs,
                                popupTemplate: {
                                    title: "MountingPoint",
                                    content: [{
                                        type: "fields",
                                        fieldInfos: [{
                                            fieldName: "name"
                                        }, {
                                            fieldName: "objectId"
                                        }, {
                                            fieldName: "id"
                                        }, {
                                            fieldName: "levelId"
                                        }, {
                                            fieldName: "roomId"
                                        }, {
                                            fieldName: "supportedAssets"
                                        }]
                                    }]
                                }
                            });
                            obj.status = "ready";
                        }
                        break;
                    case "event":
                        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, getSpataialRefOut());
                            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
                            };
                            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";
                        };
                        break;
                }
            });
            createDropDownAssets();
        });
    });
};

//Schritt 3 - Verbindung zu neuem Websocket um die vorhandenen Übungen abzufragen
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",
                "dojo/domReady!",
            ],
                function (
                    Map,
                    MapView,
                    TileLayer,
                    GraphicsLayer
                ) {
                    map = new Map({
                    });
                    view = new MapView({
                        container: "mapDiv",
                        map: map,
                        center: [(0.155225 * 180) / Math.PI, (0.925976 * 180) / Math.PI],
                        scale: 1000
                    });
                    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);
                        formatObjs();
                    })
                    getSpataialRefOut();
                }
            );
        };
    }
    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() {
    layerArr.forEach(layer => {
        if (layer.name === "eventLayer") {
            layer.layer.removeAll();
        }
    });
    var selects = document.getElementsByName("layerSelect");
    selects.forEach(select => {
        if (select.value === "eventLayer") select.checked = false;
    });
    objArr = objArr.filter(objs => objs.type !== "event");
    var date = Date.parse(document.getElementById("startDate").value) - (2 * 1000 * 60 * 60); //öffnet einen websocket mit neuer http-request -> events
    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;

    WebSocketTest();
}
function WebSocketTest() {
    if ("WebSocket" in window) {
        {
            exampleSocket = new WebSocket("ws://" + requestUrl);
            connectedToServer = true;
        }
        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 getSpataialRefOut() {
    var spatialOut = view.spatialReference;
    return (spatialOut);
}
function getWkid() {
    var wkid = view.spatialReference.__accessor__.store._values.wkid;
    return (wkid);
}
function place() {
    var filter = document.getElementById("AssetTypes").value;
    layerArr.forEach(layer => {
        layer.layer.removeAll();
    });
    objArr.forEach(obj => {
        switch (obj.type) {
            case "event":
                layerArr.forEach(layer => {
                    if (layer.name === "eventLayer") {
                        layer.layer.add(obj.graphic);
                    }
                });
                break;
            case "mountingPoint":
                layerArr.forEach(layer => {
                    if (layer.ids.includes(obj.levelId) && obj.supportedAsset == filter) {
                        layer.layer.add(obj.graphic);
                    }
                });
                break;
            case "footprint":
                layerArr.forEach(layer => {
                    if (layer.name === "footprintLayer") {
                        layer.layer.add(obj.graphic);
                    }
                });
        }
    });
}
function toggleLayer() {
    place();
    layerArr.forEach(layer => {
        map.remove(layer.layer);
    });
    var selectedLayers = document.getElementsByName('layerSelect');
    for (var x = 0; x < selectedLayers.length; x++) {
        if (selectedLayers[x].checked) {
            layerArr.forEach(layer => {
                if (layer.name === selectedLayers[x].value) {
                    map.add(layer.layer)
                }
            });
        }
    }
}

function createDropDownAssets() {
    var dpName = null;
    var dropDdiv = document.getElementById("AssetTypesDiv");
    var dropD = "<select id=\"AssetTypes\" onchange=\"place()\">";
    AssetTypeArr.forEach(AssetType => {
        dropD += "<option  value=" + AssetType.id + ">" + AssetType.designation + "</option>"
    });
    dropD += "</select>"
    dropDdiv.innerHTML = dropD;
}