class PolyObj {
    constructor(name, room) {
        this.path = [];
        this.originalXML  = [];
        this.graphic = null;
        this.name = name;
        this.room = room;
        this.alternativGraphic = null;
    }
    fixEsriBug() { //Manipulation der Koordinaten um Esri-Polygon-Füllungsbug auszugleichen
        if (this.path[0][2] != this.path[2][2]) {
            this.path[0][1] -= 0.001;
            this.path[1][1] -= 0.001;
        }
    }
    closeRing() {
        this.path.push(this.path[0]);
    }
}

var parser, xmlDoc, PolyArray;
var wallnumber = 0;
var PolygonObj = [];
var refPoint = {
    y: 493063.5202829816,
    x: 5878330.672506552,
    z: 0
};
parser = new DOMParser();
var graphicLayer = null;
var PolyObjArray = [];
var selected = null;
var alternativeSymbol = {
    type: "simple-fill",
    color: [128, 0, 0, 0.5],
    outline: {
        color: [0, 0, 0],
        width: 1
    }
};


window.onload = function() {
    document.getElementById('ModellUpload').addEventListener('change', modellXml, false);
    generateMap();
}

function generateMap() {
    require([
            "esri/Map",
            "esri/views/SceneView",
            "esri/layers/TileLayer",
            "esri/layers/SceneLayer",
            "esri/layers/GraphicsLayer",
            "dojo/domReady!",
        ],
        function(
            Map,
            SceneView,
            TileLayer,
            SceneLayer,
            GraphicsLayer,
        ) {
            map = new Map({
                // basemap: "topo"
            });
            view = new SceneView({
                container: "mapDiv",
                map: map,
                scale: 1000,
                camera: {
                    position: {
                        x: 8.896638,
                        y: 53.054441,
                        z: 40
                    }
                }
            });
            tile = new TileLayer({
                //url: "http://excgeo21.sl.defence-elec.de/arcgis/rest/services/Bremen/Hemelingen_TIF_WebMerc/MapServer",
                url: "https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer",
            })
            feature = new SceneLayer({
                //url: "http://excgeo21.sl.defence-elec.de/arcgis/rest/services/Hosted/BT56_rev576/SceneServer",
                url: "http://scene.arcgis.com/arcgis/rest/services/Hosted/Building_Hamburg/SceneServer/layers/0",
            });
            //map.add(feature);
            map.add(tile);
            graphicLayer = new GraphicsLayer();
            map.add(graphicLayer);
            view.on("click", eventHandler);

            function eventHandler(event) {
                view.hitTest(event).then(getGraphics);

                function getGraphics(response) {
                    selected = response.results[0].graphic.__accessor__.store._values.attributes.name;
                }
            };
            view.popup.on("trigger-action", function(event) {
                if (event.action.id === "highlight") {
                    PolyObjArray.forEach(polyObj => {
                        if (polyObj.name == selected) {
                            var newGraphic = polyObj.graphic.clone();
                            newGraphic.symbol = alternativeSymbol;
                            graphicLayer.remove(polyObj.graphic);
                            polyObj.alternativGraphic = newGraphic;
                            graphicLayer.add(polyObj.alternativGraphic);
                        }
                    });
                }
            });
        });
}

function modellXml(event) {
    wallnumber = 0;
    graphicLayer.removeAll();
    PolyObjArray = [];
    PolyArray = [];
    refPoint.z = 0;
    event.preventDefault();
    var XMLFile = event.target.files[0];
    parseXML(XMLFile);
}


function parseXML(XMLFile) {
    var file = XMLFile;
    var reader = new FileReader();
    reader.onload = function(event) {
        readXML = event.target.result;
        xmlDoc = parser.parseFromString(readXML, "application/xml");
        createModel();
    }
    reader.readAsText(file);
}

function createModel() {
    require([
            "esri/geometry/projection",
        ],
        function(
            projection,
        ) {
            projection.load().then(function() {
                tile.load().then(function() {

                    //PolyArrayParent = Array.from(xmlDoc.getElementsByTagName("OuterWallAreaElement").parentNode);
                    var parentNodeValue = xmlDoc.getElementsByTagName('OuterWallAreaElement')[0].parentNode;
                    console.log("parentNodeValue=", parentNodeValue);
                    var parentNodeValue1 = xmlDoc.getElementsByTagName('OuterWallAreaElement')[0].parentNode.parentNode;
                    console.log("parentNodeValue1=", parentNodeValue1);
                    var parentNodeValue2 = xmlDoc.getElementsByTagName('OuterWallAreaElement')[0].parentNode.parentNode.parentNode;
                    console.log("parentNodeValue2=", parentNodeValue2);

                    //var k = parentNodeValue2.getElementsByTagName("RoomId");

                    //  console.log(k[0].childNodes[0].nodeValue);
                    //var roomId = k[0].childNodes[0].nodeValue;


                    //var roomId=parentNodeValue2.getElementByTagName('RoomId');
                    //var roomId= parentNodeValue2.getElementsByTagName('RoomId')[0].nodeValue;
                    //console.log ("RoomID=", roomId);
                    /*
                    var roomIdvalue=xmlDoc.getElementByTagName('RoomId').value
                    console.log ("RoomID=", roomId, " val=", roomIdvalue);

                    var parentNodeValue3 = xmlDoc.getElementsByTagName('OuterWallAreaElement')[0].parentNode.parentNode.parentNode.childNodes[0];
                    console.log("parentNodeValue3=" , parentNodeValue3);
                    */
                    RoomArray = Array.from(xmlDoc.getElementsByTagName("Room"));
                    RoomArray.forEach(room => {
                        var k = room.getElementsByTagName("RoomId");
                        var roomId = k[0].childNodes[0].nodeValue;
                        PolyArray = Array.from(room.getElementsByTagName("OuterWallAreaElement"));
                        PolyArray.forEach(polygon => {
                            var checkCellar1 = Array.from(polygon.children);
                            checkCellar1.forEach(element => {
                                var checkCellar2 = Array.from(element.children);
                                if (parseFloat(checkCellar2[2].textContent) < -(refPoint.z)) {
                                    refPoint.z = -(parseFloat(checkCellar2[2].textContent));
                                }
                            });
                        });
                        PolyArray.forEach(polygon => {
                            console.log(PolyArray);
                            var polyObj = new PolyObj(wallnumber, roomId);
                            var vertexes = Array.from(polygon.children);
                            for (var x = 0; x < vertexes.length; x++) {
                              var myP = Array.from(vertexes[x].children);
                              var str = "Coord " + x + ":";
                              str += " X=" + myP[0].innerHTML;
                              str += " Y=" + myP[1].innerHTML;
                              str += " Z=" + myP[2].innerHTML;
                              str += " ; ";

                              console.log(" wall " + wallnumber + " has pathXML=", str);
                              polyObj.originalXML += str;

                                var pp = createPathPoint(Array.from(vertexes[x].children));
                                polyObj.path.push(pp);
                            }
                            wallnumber++;
                            polyObj.fixEsriBug();
                            polyObj.closeRing();
                            var graphic = createPolygonGraphic(polyObj);
                            polyObj.graphic = graphic;
                            PolyObjArray.push(polyObj);
                        });
                    });
                    placeAndCreateToggles(555);
                    XMLFile = null;
                    PolyArray = null;
                })
            })
        })
}

function placeAndCreateToggles(roomId) {
    var counter = 0;
    var wallDiv = document.getElementById("wallToggle");
    wallDiv.innerHTML = "";
    var checkboxes = null;
    checkboxes = "<table><tr>"
    PolyObjArray.forEach(wall => {
        graphicLayer.add(wall.graphic);
        if (counter % 4 == 0 && counter != 0) checkboxes += `</tr><tr>`;
        checkboxes += `<td><div style="width:20%; display:inline-block;">${wall.room}</div><input class="wallsCheck" type="checkbox" value="${wall.name}" name="WallRequests" style="float:right;" onchange="checkBoxTrigger()"></input></td><td></td>`;
        counter++;
    });
    checkboxes += "</table>"
    wallDiv.innerHTML += checkboxes;
}

function getWkid() {
    var wkid = view.spatialReference.__accessor__.store._values.wkid;
    return (wkid);
}

function getSpatialRefOut() {
    var spatialOut = view.spatialReference;
    return spatialOut;
}

function createEsriP(point) {
    var ReturnEsriP = null;
    require([
            "esri/geometry/Point",
        ],
        function(
            Point,
        ) {
            var esriP = new Point({
                y: parseFloat(point[0].innerHTML) + refPoint.x,
                x: (parseFloat(point[1].innerHTML)*-1) + refPoint.y,
                z: parseFloat(point[2].innerHTML) + refPoint.z,
                spatialReference: {
                    wkid: 32632
                }
            })
            ReturnEsriP = esriP;
        })
    return (ReturnEsriP);
}

function project(esriP) {
    var ReturnProjection = null;
    require([
            "esri/geometry/projection",
        ],
        function(
            projection,
        ) {
            var point = projection.project(esriP, getSpatialRefOut());
            ReturnProjection = [point.__accessor__.store._values.x, point.__accessor__.store._values.y, point.__accessor__.store._values.z];
        })
    return (ReturnProjection);
}

function createPolygonGraphic(polyObj) {
    // var highlight = {
    //     title: "SetPosition",
    //     id: "highlight",
    //     image: "https://www.ninonline.org/forum/uploads/monthly_2018_03/Uchiha-Small.png.b1e089fc70c9c965ec35c23041868b3d.png"
    // };
    // var remove = {
    //     title: "SetPosition",
    //     id: "place-this",
    //     image: "https://www.ninonline.org/forum/uploads/monthly_2018_03/Uchiha-Small.png.b1e089fc70c9c965ec35c23041868b3d.png"
    // };
    var graphic = null;
    require([
            "esri/Graphic",
            "esri/geometry/geometryEngine"
        ],
        function(
            Graphic,
        ) {
            var polygon = {
                type: "polygon",
                rings: polyObj.path,
                spatialReference: {
                    wkid: getWkid()
                }
            };
            //console.log(polygon);
            // polygon = geometryEngine.rotate(polygon, 318.82);
            var fillSymbol = {
                type: "simple-fill",
                color: [255, 255, 255, 0.5],
                outline: {
                    color: [0, 0, 0],
                    width: 1
                }
            };
            let wallAttribs = {
                name: polyObj.name,
                room: polyObj.room,
                pathlength: polyObj.path.length,
                path: polyObj.path,
                originalXML: polyObj.originalXML
            }
            polygraphic = new Graphic({
                geometry: polygon,
                symbol: fillSymbol,
                attributes: wallAttribs,
                popupTemplate: {
                  title: "Room {room} - Wall {name}",
                    content: [{
                        type: "fields",
                        fieldInfos: [{
                            fieldName: "pathlength",
                            label: "pathlength XML + 1",
                        }, {
                            fieldName: "originalXML"
                        }, {
                            fieldName: "path"
                        }]
                    }],
                    // actions: [highlight, remove]
                }
            });
            graphic = polygraphic;
        }
    )
    return (graphic);
}

function createPathPoint(point) {
    var tempEsriP = null;
    tempEsriP = createEsriP(point);
    pp = project(tempEsriP);
    return (pp);
}

function checkBoxTrigger() {
    graphicLayer.removeAll();
    var selects = document.getElementsByName("WallRequests");
    var room = 0;
    selects.forEach(select => {
        if (select.checked) {
            PolyObjArray.forEach(polyObj => {
                if (select.value == polyObj.name) {
                    var newGraphic = polyObj.graphic.clone();
                    room = polyObj.room;
                    newGraphic.symbol = alternativeSymbol;
                    graphicLayer.remove(polyObj.graphic);
                    polyObj.alternativGraphic = newGraphic;
                    graphicLayer.add(polyObj.alternativGraphic);
                }
            });
        } else {
            PolyObjArray.forEach(polyObj => {
                if (select.value == polyObj.name) {
                    graphicLayer.add(polyObj.graphic);
                }
            });
        }
        // Alle Waende eines Raums:
        PolyObjArray.forEach(polyObj => {
            if (room == polyObj.room) {
                var newGraphic = polyObj.graphic.clone();
                room = polyObj.room;
                newGraphic.symbol = alternativeSymbol;
                graphicLayer.remove(polyObj.graphic);
                polyObj.alternativGraphic = newGraphic;
                graphicLayer.add(polyObj.alternativGraphic);
            } else {
                PolyObjArray.forEach(polyObj => {
                    if (select.value == polyObj.name) {
                        graphicLayer.add(polyObj.graphic);
                    }
                });
            }
        });



    });
}