class polyoli {
    constructor(name) {
        this.path = [];
        this.graphic = null;
        this.name = name;
        this.alternativGraphic = null;
    }
    closeRing() {
        this.path.push(this.path[0]);
    }
}


var parser, xmlDoc, PolyArray;
var XMLFile = null;
var wallnumber = 0;
var PolygonObj = [];
var refPoint = {
    y: 493081,
    x: 5878329,
};
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('fileUpload').addEventListener('change', updateFile, 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: { // autocasts as new Camera()
                    position: { // autocasts as new Point()
                        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",
            })
            feature = new SceneLayer({
                url: "http://excgeo21.sl.defence-elec.de/arcgis/rest/services/Hosted/BT56_rev576/SceneServer",
            });
            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 updateFile(event) {
    event.preventDefault();
    XMLFile = event.target.files[0];
    parseXML();
}

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

function createModel() {
    require([
        "esri/geometry/projection",
    ],
        function (
            projection,
        ) {
            projection.load().then(function () {
                tile.load().then(function () {
                    PolyArray = Array.from(xmlDoc.getElementsByTagName("OuterWallAreaElement"));
                    PolyArray.forEach(polygon => {
                        var polyObj = new polyoli(wallnumber);
                        var vertexes = Array.from(polygon.children);
                        for (var x = 0; x < vertexes.length; x++) {
                            var pp = createPathPoint(Array.from(vertexes[x].children));
                            polyObj.path.push(pp);
                        }
                        wallnumber++;
                        polyObj.closeRing();
                        var graphic = createGraphic(polyObj);
                        polyObj.graphic = graphic;
                        PolyObjArray.push(polyObj);
                    });
                    placeAndCreateToggles();
                    XMLFile = null;
                    PolyArray = null;
                })
            })
        })
}


function placeAndCreateToggles() {
    var counter = 0;
    var wallDiv = document.getElementById("wallToggle");
    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.name}</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(vertextChildren) {
    var ReturnEsriP = null;
    require([
        "esri/geometry/Point",
    ],
        function (
            Point,
        ) {
            var esriP = new Point({
                y: parseFloat(vertextChildren[0].innerHTML) + refPoint.x,
                x: parseFloat(vertextChildren[1].innerHTML) + refPoint.y,
                z: parseFloat(vertextChildren[2].innerHTML),
                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 createGraphic(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",
    ],
        function (
            Graphic,
        ) {
            var polygon = {
                type: "polygon",
                rings: polyObj.path,
                spatialReference: { wkid: getWkid() }
            };
            var fillSymbol = {
                type: "simple-fill",
                color: [255, 255, 255, 0.5],
                outline: {
                    color: [0, 0, 0],
                    width: 1
                }
            };
            let wallAttribs = {
                name: polyObj.name,
            }
            polygraphic = new Graphic({
                geometry: polygon,
                symbol: fillSymbol,
                attributes: wallAttribs,
                popupTemplate: {
                    title: "Wall",
                    content: [{
                        type: "fields",
                        fieldInfos: [{
                            fieldName: "name"
                        }]
                    }],
                    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");
    selects.forEach(select => {
        if (select.checked) {
            PolyObjArray.forEach(polyObj => {
                if (select.value == polyObj.name) {
                    var newGraphic = polyObj.graphic.clone();
                    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);
                }
            });
        }

    });
}