class PolyLineObj {
    constructor(path) {
        this.path = path;
        this.graphic = null;
    }
}

var parser, xmlDoc;
var parser = new DOMParser();
var graphicLayer = null;
var color = null;
var x = 1;

window.onload = function () {
    document.getElementById('PathUpload').addEventListener('change', pathXml, 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",
            })
            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 pathXml(event) {
    event.preventDefault();
    var XMLFile = event.target.files[0];
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    color = { r: r, g: g, b: b };
    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");
        createPath();
    }
    reader.readAsText(file);
}


function createPath() {
    var points = [];
    var pathArray = [];
    points = Array.from(xmlDoc.getElementsByTagName("trkpt"));
    points.forEach(point => {
        var pathpoint = [parseFloat(point.attributes[1].value), parseFloat(point.attributes[0].value), parseFloat(point.children[0].textContent) / 100];
        pathArray.push(pathpoint);
    });
    var polyline_ = new PolyLineObj(pathArray);
    createPolyLineGraphic(polyline_);
}


function getWkid() {
    var wkid = view.spatialReference.__accessor__.store._values.wkid;
    return (wkid);
}
function getSpatialRefOut() {
    var spatialOut = view.spatialReference;
    return spatialOut;
}
function createPolyLineGraphic(polyline_) {
    require([
        "esri/Graphic",
    ],
        function (
            Graphic
        ) {
            var polyline = {
                type: "polyline",
                paths: polyline_.path,
            }
            var lineSymbol = {
                type: "simple-line", // autocasts as SimpleLineSymbol()
                color: [color.r, color.g, color.b],
                width: 4
            };
            var polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: lineSymbol
            });

            polyline_.graphic = polylineGraphic;
            console.log(polyline_);
            graphicLayer.add(polyline_.graphic);
        })
}

function toggleBuildings() {
    x++;
    if (x % 2 == 0) map.remove(feature)
    else map.add(feature);
}