class InitializationHandler {
    constructor() {
    }

    async generateMap() {
        return new Promise((res) => {
            require([
                "esri/Map",
                "esri/views/SceneView",
                "esri/layers/GraphicsLayer",
                "esri/Graphic",
                "esri/geometry/Point",
                "esri/geometry/projection",
                "dojo",
            ],
                (
                    Map,
                    SceneView,
                    GraphicsLayer,
                    Graphic,
                    Point,
                    Projection,
                ) => {
                    // console.log(L);
                    const map = new Map({
                        basemap: "dark-gray"
                    });
                    const view = new SceneView({
                        container: "mapDiv",
                        map,
                        scale: 1000,
                        camera: {
                            position: {
                                x: 8.896638,
                                y: 53.054441,
                                z: 400
                            }

                        }
                    });
                    const graphicLayer = new GraphicsLayer();
                    map.add(graphicLayer);
                    res({ map, view, graphicLayer, Projection, Graphic, Point });
                });
        })
    }
}

class FileManager {
    constructor() {
        this.resultXML;
        this.fileReader = new FileReader();
        this.domParser = new DOMParser();
    }

    loadFileContent(file) {
        return new Promise(res => {
            this.fileReader.readAsText(file);
            this.fileReader.onloadend = () => {
                this.resultXML = this.domParser.parseFromString(this.fileReader.result, "application/xml");
                res();
            }
        })
    }

    getFileAsJson() {
        return this.xmlToJson(this.resultXML);
    }

    xmlToJson(xml) {
        // Create the return object
        var obj = {};

        if (xml.nodeType == 1) { // element
            // do attributes
            if (xml.attributes.length > 0) {
                obj["@attributes"] = {};
                for (var j = 0; j < xml.attributes.length; j++) {
                    var attribute = xml.attributes.item(j);
                    obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
                }
            }
        } else if (xml.nodeType == 3) { // text
            obj = xml.nodeValue;
        }

        // do children
        if (xml.hasChildNodes()) {
            for (var i = 0; i < xml.childNodes.length; i++) {
                var item = xml.childNodes.item(i);
                var nodeName = item.nodeName;
                if (typeof (obj[nodeName]) == "undefined") {
                    obj[nodeName] = this.xmlToJson(item);
                } else {
                    if (typeof (obj[nodeName].push) == "undefined") {
                        var old = obj[nodeName];
                        obj[nodeName] = [];
                        obj[nodeName].push(old);
                    }
                    obj[nodeName].push(this.xmlToJson(item));
                }
            }
        }
        return obj;
    };

    cleanBuildingJson(dirtyJson, remove_duplicates = true, fix_esri_bug = true) {
        let building = {};
        building.name = dirtyJson.BuildingVulnerability.BuildingName["#text"];
        building.isExpanded = false;
        building.rooms = [];

        if (!Array.isArray(dirtyJson.BuildingVulnerability.Rooms.Room)){
          dirtyJson.BuildingVulnerability.Rooms.Room = [dirtyJson.BuildingVulnerability.Rooms.Room]
        }

        dirtyJson.BuildingVulnerability.Rooms.Room.forEach(room => {
            let room_tmp = {};
            room_tmp.name = room.RoomId["#text"];
            room_tmp.isExpanded = false;
            room_tmp.walls = [];
            if (room.RoomOuterWalls.OuterWall && Array.isArray(room.RoomOuterWalls.OuterWall)) {
                let wallCounter = 0;
                room.RoomOuterWalls.OuterWall.forEach(wall => {
                    let wall_tmp = {}
                    wall_tmp.isSelected = false;
                    wall_tmp.name = wallCounter;
                    wall_tmp.points = [];
                    if (wall.OuterWallAreaElement.PolygonPoint) {
                        wall.OuterWallAreaElement.PolygonPoint.forEach(point => {
                            wall_tmp.points.push({ "x": +point.X["#text"], "y": +point.Y["#text"], "z": +point.Z["#text"] });
                        });
                    }
                    room_tmp.walls.push(wall_tmp);
                    wallCounter++;
                });
            }
            building.rooms.push(room_tmp);
        });

        if (!remove_duplicates) return building
        building.rooms.forEach(room => {
            room.walls = room.walls.filter(wall => {
                let counter = 0;
                building.rooms.forEach(room_ => {
                    room_.walls.forEach(wall_ => {
                        if (JSON.stringify(wall.points) === JSON.stringify(wall_.points)) {
                            counter++;
                        }
                    });
                });
                if (counter > 1) return false;
                return true;
            })
        });

        if (!fix_esri_bug) return building;
        building.rooms.forEach(room => {
            room.walls.map((wall) => {
                let lowest_point = wall.points[0].z;
                wall.points.forEach(point => {
                    if (point.z < lowest_point) lowest_point = point.z;
                });
                wall.points.forEach(point => {
                    if (point.z > lowest_point) point.y += 0.0001;
                    if (point.z > lowest_point) point.x += 0.0001;

                });
            })

        });
        return building;
    }

    cleanEquipmentJson(dirtyJson) {
        let equipment = {};
        equipment.referencePoints = [];
        //streif/header/group/group/[1]/switch/[0]/group/externalReferences
        console.log(dirtyJson.STREIF.Header.Group.Group);
        let groups = dirtyJson.STREIF.Header.Group.Group;
        groups.shift();
        console.log(groups)
        groups.forEach(group => {
            console.log(group)
            if (!Array.isArray(group.Switch)) return;
            group.Switch.forEach(_switch => {

                if (!Array.isArray(_switch.Group.External_Reference)){
                  _switch.Group.External_Reference = [_switch.Group.External_Reference]
                }

                _switch.Group.External_Reference.forEach(external_reference => {
                    equipment.referencePoints.push({
                        isExternal: false,
                        name: external_reference.Name["#text"],
                        coords: {
                            x: +external_reference.Coord["@attributes"].X,
                            y: +external_reference.Coord["@attributes"].Y,
                            z: +external_reference.Coord["@attributes"].Z
                        }
                    })
                    console.log(external_reference.Name);
                });
            });
        });

        const referencePoints = dirtyJson.STREIF.Header.Group.External_Reference;
        referencePoints.forEach(referencePoint => {
            equipment.referencePoints.push({
                isExternal: true,
                name: referencePoint.Name["#text"],
                coords: {
                    x: +referencePoint.Coord["@attributes"].X,
                    y: +referencePoint.Coord["@attributes"].Y,
                    z: +referencePoint.Coord["@attributes"].Z
                }
            })
        });
        return equipment;
    }
}

class DataProvider {
    constructor() {
        this.data = [];
        this.equipment = [];
    }
    addBuilding(building) {
        this.data.push(building);
    }
    getCurrentData() {
        return this.data;
    }
    addEquipment(equipment) {
        console.log(equipment);
        this.equipment.push(equipment);
    }
    getCurrentEquipment() {
        return this.equipment;
    }
}



class UIHandler {
    constructor(dataProvider) {
        this.dataProvider = dataProvider;
        this.rootElement = document.getElementById("myUL");
    }
    makeBuildingRow(building) {
        let row = document.createElement('div');
        row.classList.add("row");
        row.onclick = () => {
            building.isExpanded = !building.isExpanded;
            this.render();
        }
        let outerContainer = document.createElement('div');
        outerContainer.classList.add('col-12');
        outerContainer.classList.add('bg-light');
        row.appendChild(outerContainer);
        let fluidContainer = document.createElement('div');
        fluidContainer.classList.add('container-fluid');
        outerContainer.appendChild(fluidContainer);
        let innerRow = document.createElement('div');
        innerRow.classList.add('row');
        innerRow.classList.add("row-hover");
        fluidContainer.appendChild(innerRow);
        let segOne = document.createElement('div');
        segOne.classList.add('col-1');
        let segThree = document.createElement('div');
        segThree.classList.add('col-11');
        segThree.classList.add('p-2');
        segThree.classList.add('treeStruct');
        let segThreeInner_one = document.createElement('div');
        if (building.isExpanded) segThreeInner_one.classList.add('buildingTreeRight');
        let segThreeInner_two = document.createElement('div');
        if (building.isExpanded) segThreeInner_two.classList.add('buildingTreeBottom');
        segThree.innerText = 'Building ' + building.name;
        segThree.appendChild(segThreeInner_one);
        segThree.appendChild(segThreeInner_two);
        innerRow.appendChild(segOne);
        innerRow.appendChild(segThree);
        return row;
    }
    makeRoomRow(room) {
        let row = document.createElement('div');
        row.classList.add("row");
        row.onclick = () => {
            room.isExpanded = !room.isExpanded;
            this.render();
        }
        let outerContainer = document.createElement('div');
        outerContainer.classList.add('col-12');
        outerContainer.classList.add('bg-light');
        row.appendChild(outerContainer);
        let fluidContainer = document.createElement('div');
        fluidContainer.classList.add('container-fluid');
        outerContainer.appendChild(fluidContainer);
        let innerRow = document.createElement('div');
        innerRow.classList.add('row');
        innerRow.classList.add("row-hover");
        fluidContainer.appendChild(innerRow);
        let segOne = document.createElement('div');
        segOne.classList.add('col-1');
        let segTwo = document.createElement('div');
        segTwo.classList.add('col-1');
        segTwo.classList.add('border-dark');
        segTwo.classList.add('border-end');
        let segThree = document.createElement('div');
        segThree.classList.add('col-10');
        segThree.classList.add('p-2');
        segThree.classList.add('treeStruct');
        let segThreeInner_one = document.createElement('div');
        segThreeInner_one.classList.add('roomTreeRight');
        let segThreeInner_two = document.createElement('div');
        if (room.isExpanded) segThreeInner_two.classList.add('roomTreeBottom');
        segThree.innerText = 'Room ' + room.name;
        segThree.appendChild(segThreeInner_one);
        segThree.appendChild(segThreeInner_two);
        innerRow.appendChild(segOne);
        innerRow.appendChild(segTwo);
        innerRow.appendChild(segThree);
        return row;
    }
    makeWallRow(wall) {
        let row = document.createElement('div');
        row.classList.add("row");

        let outerContainer = document.createElement('div');
        outerContainer.classList.add('col-12');
        outerContainer.classList.add('bg-light');
        row.appendChild(outerContainer);
        let fluidContainer = document.createElement('div');
        fluidContainer.classList.add('container-fluid');
        if (wall.isSelected) fluidContainer.classList.add("selectedWall");
        outerContainer.appendChild(fluidContainer);
        let innerRow = document.createElement('div');
        innerRow.classList.add('row');
        innerRow.classList.add("row-hover");
        fluidContainer.appendChild(innerRow);
        let segOne = document.createElement('div');
        segOne.classList.add('col-1');
        let segTwo = document.createElement('div');
        segTwo.classList.add('col-2');
        segTwo.classList.add('border-dark');
        segTwo.classList.add('border-end');
        let segThree = document.createElement('div');
        segThree.classList.add('col-9');
        segThree.classList.add('p-2');
        segThree.classList.add('treeStruct');
        let segThreeInner = document.createElement('div');
        segThreeInner.classList.add('wallTreeRight');
        segThree.innerText = 'Wall ' + wall.name;
        segThree.appendChild(segThreeInner);
        innerRow.appendChild(segOne);
        innerRow.appendChild(segTwo);
        innerRow.appendChild(segThree);
        return row;

    }
    render() {
        while (this.rootElement.firstChild) {
            this.rootElement.removeChild(this.rootElement.firstChild);
        }
        let buildingArray = this.dataProvider.getCurrentData();
        buildingArray.forEach(building => {
            this.createBuilding(building);
        });
    }

    createBuilding(buildingConfig) {
        let buildingListEntry = document.createElement("li");
        let buildingListEntrySpan = document.createElement("SPAN");
        buildingListEntrySpan.classList.add("caret");
        buildingListEntrySpan.appendChild(this.makeBuildingRow(buildingConfig));
        buildingListEntry.appendChild(buildingListEntrySpan);
        buildingListEntry.appendChild(this.createRoomList(buildingConfig.rooms, buildingConfig.isExpanded));
        document.getElementById('myUL').appendChild(buildingListEntry);
    }

    createRoomList(roomArray, isExpanded) {
        let roomList = document.createElement("ul");
        roomList.classList.add("nested");
        if (isExpanded) roomList.classList.add("active");
        roomArray.forEach(room => {
            let roomListEntry = document.createElement("li");
            let roomListEntrySpan = document.createElement("SPAN");
            roomListEntrySpan.classList.add("caret");
            roomListEntrySpan.appendChild(this.makeRoomRow(room));
            roomListEntry.appendChild(roomListEntrySpan);
            roomListEntry.appendChild(this.createWallList(room.walls, room.isExpanded));
            roomList.appendChild(roomListEntry);
        });
        return roomList;
    }

    createWallList(wallArray, isExpanded) {
        let wallList = document.createElement("ul");
        wallList.classList.add("nested");
        if (isExpanded) wallList.classList.add("active");
        wallArray.forEach(wall => {
            let wallListEntry = document.createElement("li");
            let wallListEntrySpan = document.createElement("SPAN");
            wallListEntrySpan.appendChild(this.makeWallRow(wall));
            wallListEntry.appendChild(wallListEntrySpan);
            wallList.appendChild(wallListEntry);
        });
        return wallList;
    }
}

class DrawingHandler {
    constructor(dataProvider, uiHandler, graphicLayer, Point, Projection, Graphic, view, map) {
        this.dataProvider = dataProvider;
        this.uiHandler = uiHandler;
        this.graphicLayer = graphicLayer;
        this.Point = Point;
        this.Projection = Projection;
        this.Graphic = Graphic;
        this.view = view;
        this.map = map
        this.fillActive = true;
        this.view.on("click", (e) => {
            if (e.button === 0) {
                this.view.hitTest(e).then((res) => {
                    if (res.results[0].graphic.geometry.type == "polygon") res.results[0].graphic.clickCallback()
                });
            }
        })
        const [r, g, b] = [Math.floor(Math.random() * 50) + 100, Math.floor(Math.random() * 50) + 150, 255];
        this.r = r;
        this.g = g;
        this.b = b;

        this.fillSymbol = {
            type: "simple-fill", // autocasts as new SimpleFillSymbol()
            color: [this.r, this.g, this.b, 0.8],
            outline: {
                // autocasts as new SimpleLineSymbol()
                color: [255, 255, 255],
                width: 2
            }
        };
        this.nonFillSymbol = {
            type: "simple-fill", // autocasts as new SimpleFillSymbol()
            color: [this.r, this.g, this.b, 0.8],
            style: "none",
            outline: {
                // autocasts as new SimpleLineSymbol()
                color: [255, 255, 255],
                width: 2
            }
        };
    }
    draw() {
        this.Projection.load().then(() => {
            let buildings = this.dataProvider.getCurrentData();
            buildings.forEach(building => {
                building.rooms.forEach(room => {
                    room.walls.forEach(wall => {
                        const wallGeometry = {
                            type: "polygon",
                            rings: [],
                        }

                        const markerSymbol = {
                            type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                            color: [this.r, this.g, this.b],
                            size: "5px"
                        };




                        wall.points.forEach(point => {
                            let p = {
                                type: "point", // autocasts as new Point()
                                x: 493063.5202829816 + point.x,
                                y: 5878330.672506552 + point.y,
                                z: 0 + point.z,
                                spatialReference: {
                                    wkid: 32632
                                }
                            }
                            let p_transformed = this.Projection.project(p, this.view.spatialReference);
                            wallGeometry.rings.push([p_transformed.longitude, p_transformed.latitude, p_transformed.z]);

                            const pointGraphic = new this.Graphic({
                                geometry: p_transformed,
                                symbol: markerSymbol

                            });
                            this.graphicLayer.add(pointGraphic);
                        });
                        wallGeometry.rings.push(wallGeometry.rings[0]);
                        wallGeometry.rings = wallGeometry.rings.reverse();

                        let wallCoordTableContent = ``;
                        wall.points.forEach(vertex => {
                            wallCoordTableContent +=
                                `<tr>
                                <td>${parseFloat(vertex.x).toFixed(3)}</td>
                                <td>${parseFloat(vertex.y).toFixed(3)}</td>
                                <td>${parseFloat(vertex.z).toFixed(3)}</td>
                            </tr>`
                        });
                        const wallCoordTable = `<table style="width:100%">
                        <tr>
                          <th>X</th>
                          <th>Y</th>
                          <th>Z</th>
                        </tr>
                        ${wallCoordTableContent}
                      </table>`

                        let logVertices = {
                            title: "Log Vertices",
                            id: `log${room.name}${wall.name}`,
                        };

                        const wallAttributes = {
                            name: `Room ${room.name} - Wall ${wall.name}`,
                            ringSize: wallGeometry.rings.length,
                            vertices: wallCoordTable
                        }
                        const wallPopupTemplate = {
                            title: "{name}",
                            content: [
                                {
                                    type: "fields",
                                    fieldInfos: [
                                        {
                                            fieldName: "ringSize"
                                        },
                                        {
                                            fieldName: "vertices"
                                        },
                                    ]
                                }
                            ],
                            actions: [logVertices]
                        }

                        this.view.popup.on("trigger-action", (event) => {
                            if (event.action.id === `log${room.name}${wall.name}`) {
                                let array = [];
                                wall.points.forEach(point => {
                                    array.push([point.x, point.y, point.z * 100]);
                                });
                                console.log(JSON.stringify(array));
                                debugger;
                            }
                        });

                        const polygonGraphic = new this.Graphic({
                            geometry: wallGeometry,
                            symbol: this.fillActive ? this.fillSymbol : this.nonFillSymbol,
                            attributes: wallAttributes,
                            popupTemplate: wallPopupTemplate
                        });


                        polygonGraphic.clickCallback = () => {
                            buildings.forEach(building_ => {
                                building_.isExpanded = false;
                                building_.rooms.forEach(room_ => {
                                    room_.isExpanded = false;
                                    room_.walls.forEach(wall_ => {
                                        wall_.isSelected = false;
                                    });
                                });
                            });
                            building.isExpanded = true;
                            room.isExpanded = true;
                            wall.isSelected = true;
                            this.uiHandler.render();
                        }
                        this.graphicLayer.add(polygonGraphic);

                    });
                });

            });

            const externalMarkerSymbol = {
                type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                color: [255, 0, 0],
                size: "15px"
            };
            const internalMarkerSymbol = {
                type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                color: [0, 255, 0],
                size: "15px"
            };

            let equipments = this.dataProvider.getCurrentEquipment();
            equipments.forEach(equipment => {
                equipment.referencePoints.forEach(referencePoint => {

                    let p = {
                        type: "point", // autocasts as new Point()
                        x: 493063.5202829816 + referencePoint.coords.x,
                        y: 5878330.672506552 + referencePoint.coords.y,
                        z: 0 + referencePoint.coords.z,
                        spatialReference: {
                            wkid: 32632
                        }
                    }
                    let p_transformed = this.Projection.project(p, this.view.spatialReference);

                    const referencePointAttribute = {
                        name: referencePoint.name,
                        coords: `<table style="width:100%">
                        <tr>
                          <th>X</th>
                          <th>Y</th>
                          <th>Z</th>
                        </tr>
                        <tr>
                            <td>${parseFloat(referencePoint.coords.x).toFixed(3)}</td>
                            <td>${parseFloat(referencePoint.coords.y).toFixed(3)}</td>
                            <td>${parseFloat(referencePoint.coords.z).toFixed(3)}</td>
                        </tr>
                      </table>`
                    }
                    const referencePointAttributeTemplate = {
                        title: "{name}",
                        content: [
                            {
                                type: "fields",
                                fieldInfos: [
                                    {
                                        fieldName: "coords"
                                    }
                                ]
                            }
                        ],
                    }

                    const pointGraphic = new this.Graphic({
                        geometry: p_transformed,
                        symbol: referencePoint.isExternal ? externalMarkerSymbol : internalMarkerSymbol,
                        attributes: referencePointAttribute,
                        popupTemplate: referencePointAttributeTemplate
                    });
                    this.graphicLayer.add(pointGraphic);
                });
            });

        })


    }
    toggleFill() {
        let useFill = !this.fillActive;
        this.fillActive = !this.fillActive;

        let symbol = useFill ? this.fillSymbol : this.nonFillSymbol;
        this.graphicLayer.graphics.forEach(graphic => {
            if (graphic.geometry.type == "polygon") graphic.set('symbol', symbol);
        });
    }
}

//This is the main
(() => {
    const fileManager = new FileManager();
    const dataProvider = new DataProvider();
    const uiHandler = new UIHandler(dataProvider);
    let drawingHandler;
    const initializationHandler = new InitializationHandler();
    initializationHandler.generateMap().then((esriLoad) => {
        esriObjects = esriLoad;
        drawingHandler = new DrawingHandler(dataProvider,
            uiHandler,
            esriObjects.graphicLayer,
            esriObjects.Point,
            esriObjects.Projection,
            esriObjects.Graphic,
            esriObjects.view,
            esriObjects.map
        );
    });

    document.getElementById("flexSwitchCheckDefault").addEventListener("click", () => {
        drawingHandler.toggleFill();
    })

    const buildingFile = document.getElementById('exampleFormControlFile1');
    buildingFile.onchange = async () => {
        const file = buildingFile.files[0];
        await fileManager.loadFileContent(file);
        dataProvider.addBuilding(fileManager.cleanBuildingJson(fileManager.getFileAsJson()));
        uiHandler.render();
        drawingHandler.draw();
        document.getElementById('modal-close-button').click();
    }

    const equipmentFile = document.getElementById('exampleFormControlFile2');
    equipmentFile.onchange = async () => {
        const file = equipmentFile.files[0];
        await fileManager.loadFileContent(file);
        console.log(fileManager.getFileAsJson());
        dataProvider.addEquipment(fileManager.cleanEquipmentJson(fileManager.getFileAsJson()));
        drawingHandler.draw();
        document.getElementById('modal-close-button').click();
    }
})();