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 layer {
    constructor(name) {
        this.name = name;
        this.ids = [];
        this.layer = null;
    }
}

var ipadresse = "EXCTDS01:";
var port = "2080";
var layerArr = [];
var objArr = [];
var AssetTypeArr = [];
let currentGraphic = null;
let newPosition = null;
let placeFunction = function () {
    if (newPosition == null) {
        alert("Bitte eine gültige position angeben!");
    } else {
        objArr.forEach(obj => {
            if (obj.graphic == currentGraphic.graphic) {
                console.log(`Wollen sie ${obj.graphic.__accessor__.store._values.attributes.name} mit folgenden Koordinaten x: ${newPosition.x}/ y: ${newPosition.y} neu platzieren?`);
            }
        });

    }
}
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"
            }));
        };
        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.objects.forEach(building => {
                if (building.path.length <= 0) building.path = null;
                var footprintObj = new Footprint(building.designation, building.id, building.path, 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 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]);
                if (mountingPointObj.supportedAsset === 5 || mountingPointObj.supportedAsset === 6) objArr.push(mountingPointObj);
            });
            createLayerSelection();
        }
    )
    createMap();
};
function formatObjs() {
    require([
        "esri/geometry/Point",
        "esri/geometry/projection",
        "esri/Graphic",
    ], function (Point, projection, Graphic) {
        var setNewPosition = {
            title: "SetPosition",
            id: "place-this",
            image: "https://www.ninonline.org/forum/uploads/monthly_2018_03/Uchiha-Small.png.b1e089fc70c9c965ec35c23041868b3d.png"
        };
        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, getSpatialRefOut());
                            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, getSpatialRefOut());
                                    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,
                                type: obj.type
                            }
                            obj.graphic = new Graphic({
                                geometry: polygon,
                                symbol: fillSymbol,
                                attributes: buildingAtr
                            });
                            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: getSpatialRefOut()
                            });
                            let mountingPointS = {
                                type: "simple-marker",
                                color: "black",
                            }
                            let mountingPointEventAttribs = {
                                name: obj.name,
                                objectId: obj.objId,
                                id: obj.id,
                                levelId: obj.levelId,
                                roomId: obj.roomId,
                                supportedAssets: obj.supportedAsset,
                                type: obj.type
                            }
                            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"
                                        }]
                                    }],
                                    actions: [setNewPosition],
                                }
                            });
                            obj.status = "ready";
                        }
                        break;
                }
            });
            createDropDownAssets();
        });
    });
};

//Schritt 3 - Verbindung zu neuem Websocket um die vorhandenen Übungen abzufragen
function createMap() {
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/TileLayer",
        "dojo/domReady!",
    ],
        function (
            Map,
            MapView,
            TileLayer,
        ) {
            map = new Map({
            });
            view = new MapView({
                container: "mapDiv",
                map: map,
                camera: {
                    position: {
                        x: 8.896638,
                        y: 53.054441,
                    }
                },
                scale: 1000
            });
            view.on("click", eventHandler); // für maus
            function eventHandler(event) {
                view.hitTest(event).then(getGraphics);
                function getGraphics(response) {
                    console.log(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);
                view.popup.on("trigger-action", function (event) {
                    if (event.action.id === "place-this") {
                        placeFunction();
                    }
                });
                formatObjs();
            })
        })
}
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 getSpatialRefOut() {
    var spatialOut = view.spatialReference;
    return spatialOut;
}
function getWkid() {
    var wkid = view.spatialReference.__accessor__.store._values.wkid;
    return (wkid);
}
function place() {
    layerArr.forEach(layer => {
        layer.layer.removeAll();
    });
    objArr.forEach(obj => {
        switch (obj.type) {
            case "mountingPoint":
                layerArr.forEach(layer => {
                    if (layer.ids.includes(obj.levelId)) {
                        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 = selectedLayers.length - 1; x >= 0; x--) {
        if (selectedLayers[x].checked) {
            layerArr.forEach(layer => {
                if (layer.name === selectedLayers[x].value) {
                    map.add(layer.layer)
                }
            });
        }
    }
}


function createDropDownAssets() {
    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;
}
function createLayerSelection() {
    var layerDiv = document.getElementById("layers");
    var append = "";
    layerArr.forEach(layer => {
        if (layer.name != undefined) {
            append += `<div><input class="layer" type="checkbox" value=${layer.name} name="layerSelect" onchange="toggleLayer()">${layer.name}</input></div>`;
        }
    });
    layerDiv.innerHTML += append;
}