Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjNjM5YzFjNC03NWNmLTQ2M2YtOWJiNC0xODNmMTY2ZjkwNTkiLCJpZCI6MzY3NjEsImlhdCI6MTYwMzk4NTU3Nn0.G3fnwzZ50towP1Nv9goyvu0JxJW5GtiudTR7X67Zo84';

var viewer = new Cesium.Viewer('cesiumContainer', {
    homeButton: false,
    baseLayerPicker: false,
    navigationHelpButton: false,
    timeline: true,
    //shadows:true,
    animation: false,
    sceneModePicker: false,
    geocoder: false,
    sceneMode: Cesium.SceneMode.SCENE3D
});

viewer.scene.globe.depthTestAgainstTerrain = true;
//--------------------hover over surfaces--------------------
var singleChart = document.getElementById('singleChartContainer');

var roofViewActivated = false;

//load address
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

        var coordinate = JSON.parse(request.responseText);
        var lat = coordinate.results[0].geometry.lat;
        var lng = coordinate.results[0].geometry.lng;
        console.log(lat + "  " + lng);
        fly(lat, lng);
    }
}

function searchaddress() {
    var query = document.getElementById('SearchAddress').value;
    request.open("GET", 'https://api.opencagedata.com/geocode/v1/json?key=c73da14969e6408ab4535b3ad6dc43ea&pretty=1&no_annotations=1&q=' + query, true);
    request.send();
}

function fly(lat, lng) {
    var pinBuilder = new Cesium.PinBuilder();

    var bluePin = viewer.entities.add({
        name: "Blank blue pin",
        position: Cesium.Cartesian3.fromDegrees(lng, lat),
        billboard: {
            image: pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        },
    });
    viewer.zoomTo(bluePin);

    viewer.flyTo(bluePin);

}

// HTML overlay for showing feature name on mouseover
var nameOverlay = document.createElement("div");
viewer.container.appendChild(nameOverlay);
nameOverlay.className = "backdrop";
nameOverlay.style.display = "none";
nameOverlay.style.position = "absolute";
nameOverlay.style.bottom = "0";
nameOverlay.style.left = "0";
nameOverlay.style["pointer-events"] = "none";
nameOverlay.style.padding = "4px";
nameOverlay.style.backgroundColor = "white";


var chosenDate = new Cesium.GregorianDate(2021, 12, 2, 11); //the chosen Date from the Timeline

//getting clicked Date from the timeline element
viewer.timeline.container.onmouseup = (e) => {
    var julianDate = viewer.clock.currentTime;
    Cesium.JulianDate.toGregorianDate(julianDate, chosenDate);
    //console.log(chosenDate);
}

// An entity object which will hold info about the currently selected feature for infobox display
var selectedEntity = new Cesium.Entity();

// Get default left click handler for when a feature is not picked on left click
var clickHandler = viewer.screenSpaceEventHandler.getInputAction(
    Cesium.ScreenSpaceEventType.LEFT_CLICK
);

function featurevar(feature, originalColor) {
    this.feature = feature;
    this.originalColor = originalColor;
}

//conatins currently highlighted features
var highlightedFeatures = [];

//conatins currently selected features
var selectedFeatures = [];
var hoverpid;
var selectpid;
var pickedselect = true;
var pickedhigh = false;
var pickedalreadyselect = false;
var radio = document.getElementById('radio-group');

//selected gmlID
var gmlID;


radio.addEventListener('click', function() {
    //hide chart for individual buildings
    singleChart.style.visibility = 'hidden';

    // If a feature was previously selected, undo the highlight
    tileContent.forEach(t => {
        if (t.getProperty("gml_parent_id") === selectpid) {
            selectedFeatures.forEach(s => {
                if (Cesium.defined(s.feature) && (t.getProperty("gml_id") === s.feature.getProperty("gml_id"))) {
                    t.color = s.originalColor;
                }
            });
        }
    });
    selectedFeatures = [];
    selectpid = 0;
}, false);

// Color a feature yellow on hover.
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
        pickedselect = true;

        // If a feature was previously highlighted, undo the highlight
        tileContent.forEach(t => {
            if (t.getProperty("gml_parent_id") === hoverpid) {
                highlightedFeatures.forEach(h => {
                    if (Cesium.defined(h.feature) && (t.getProperty("gml_id") === h.feature.getProperty("gml_id"))) {
                        t.color = h.originalColor;
                    }
                });
            }
        });
        highlightedFeatures = [];
        hoverpid = 0;

        // Pick a new feature
        var pickedFeature = viewer.scene.pick(movement.endPosition);
        if (!Cesium.defined(pickedFeature)) {
            nameOverlay.style.display = "none";
            return;
        }

        //SURFACE-VIEW
        if (document.getElementById("surface").checked) {

            // A feature was picked, so show it's overlay content
            nameOverlay.style.display = "block";
            nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + "px";
            nameOverlay.style.left = movement.endPosition.x + "px";

            if (!Cesium.defined(pickedFeature) || !(pickedFeature instanceof Cesium.Cesium3DTileFeature)) {
                nameOverlay.style.display = 'none';
                return;
            }

            var name = pickedFeature.getProperty("gml_id");
            var shadowhourvaluepercent = 0;
            nameOverlay.textContent = "ID: " + name + "\t shadowvalue:" + shadowhourvaluepercent;
            // Highlight the feature if it's not already selected.
            selectedFeatures.forEach(s => {
                if (s.feature === pickedFeature) {
                    pickedselect = false;
                }
            });

            hoverpid = pickedFeature.getProperty("gml_parent_id");

            if (pickedselect) {
                tileContent.forEach(t => {
                    if (t === pickedFeature) {
                        if (t.getProperty("feature_type") === "RoofSurface") {
                            highlightedFeatures.push(new featurevar(t, t.color));
                            t.color = Cesium.Color.GREEN;

                        } else {
                            highlightedFeatures.push(new featurevar(t, t.color));
                            t.color = Cesium.Color.YELLOW;
                        }

                    }
                });
            }

        }

        //Building View
        else if (document.getElementById("building").checked) {
            // A feature was picked, so show it's overlay content
            nameOverlay.style.display = "block";
            nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + "px";
            nameOverlay.style.left = movement.endPosition.x + "px";

            if (!Cesium.defined(pickedFeature) || !(pickedFeature instanceof Cesium.Cesium3DTileFeature)) {
                nameOverlay.style.display = 'none';
                return;
            }


            name = pickedFeature.getProperty("gml_parent_id");
            hoverpid = name;

            nameOverlay.textContent = name;
            // Highlight the feature if it's not already selected.
            if (hoverpid !== selectpid) {
                tileContent.forEach(t => {
                    if (t.getProperty("gml_parent_id") === hoverpid) {
                        highlightedFeatures.push(new featurevar(t, t.color));
                        t.color = Cesium.Color.YELLOW;
                    }
                });
            }
        }

        //Roof View
        else if (document.getElementById("roof").checked) {
            console.log("clicked when in roof view and on hover");
        }

    },
    Cesium.ScreenSpaceEventType.MOUSE_MOVE);


//----------------------------------------------------------------------------------------------- 
var pickBuildingFunction
var pickYearOfConstruction
var pickHeight
var pickHeatedVolume
var pickTotalSurfaceArea = 0
var pickRoofType
var pickUValue

var shadowHourValue = 0;
var SurfacePvPotential = [];


//Color a feature on selection and show metadata in the InfoBox
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
        //hide chart for individual buildings
        singleChart.style.visibility = 'hidden';

        pickedhigh = false;

        pickedalreadyselect = false;

        // If a feature was previously selected, undo the highlight
        tileContent.forEach(t => {
            if (t.getProperty("gml_parent_id") === selectpid) {
                selectedFeatures.forEach(s => {
                    if (Cesium.defined(s.feature) && (t.getProperty("gml_id") === s.feature.getProperty("gml_id"))) {
                        t.color = s.originalColor;
                    }
                });
            }
        });
        selectpid = 0;
        selectedFeatures = [];

        //pick a new feature
        var pickedFeature = viewer.scene.pick(movement.position);
        if (!Cesium.defined(pickedFeature)) {
            clickHandler(movement);
            return;
        }
        selectpid = pickedFeature.getProperty("gml_parent_id");

        //Show chart for individual buildings. But only if building view is activated
        if (Cesium.defined(pickedFeature) && (!document.getElementById("surface").checked)) {
            singleChart.style.visibility = 'visible';
        }

        /*select the feature if it's not already selected
        selectedFeatures.forEach(s => {
            if (pickedFeature === s.feature) {
                console.log("return");
                pickedalreadyselect = true;
            }
        });

        if(pickedalreadyselect){
            return;
        }*/

        highlightedFeatures.forEach(h => {
            if (h.feature === pickedFeature) {
                pickedhigh = true;
            }
        });

        //fill individual charts
        gmlID = pickedFeature.getProperty("gml_parent_id");
        surID = pickedFeature.getProperty("gml_id")

        pickBuildingFunction = "Not Defined"
        pickYearOfConstruction = "Not Defined"
        pickHeight = "Not Defined"
        pickHeatedVolume = "Not Defined"
        pickTotalSurfaceArea = 0
        pickRoofType = "Not Defined"
        pickUValue = "Not Defined"

        //fill variables for Single Building Properties
        fillTableProperties(gmlID, surID)


        //Surface View
        if (document.getElementById("surface").checked) {
            resetRoofColors();
            //save the selected feature's original color
            if (pickedhigh) {
                highlightedFeatures.forEach(h => {
                    if (h.feature === pickedFeature) {
                        selectedFeatures.push(new featurevar(h.feature, h.originalColor));
                    }
                });
                highlightedFeatures = [];

                //highlight newly selected feature
                tileContent.forEach(t => {
                    if (t === pickedFeature) {
                        //used for debugging, when clicking on a surface
                        //console.log(t.getProperty("description") + "\n" + t.getProperty("feature_type") + "\n" + t.getProperty("gml_id") + "\n" + t.getProperty("gml_parent_id"));

                        t.color = Cesium.Color.LIME;

                        //color surfaces depending on their shadow value
                        for (const [key, value] of Object.entries(shadowdata)) { //looping threw the shadowdata array
                            if (key === t.getProperty("gml_id")) { //checking if the ids of the current surface match the id in the shadowdata array
                                //console.log("hour:",chosenDate.hour);
                                shadowHourValue = value[chosenDate.hour - 1] //getting the current chosen hour from the timeline
                                //console.log("shadowHourValue",shadowHourValue);

                                t.color = Cesium.Color.fromCssColorString(getShadowPalette(shadowHourValue)); //coloring the surface

                            }
                        }

                        //coloring surfaces on pv potential
                        for (const [key, value] of Object.entries(pvPotentialSurfaces)) { //looping threw the shadowdata array                            
                            if (value["id"] === t.getProperty("gml_id")) { //checking if the ids of the current surface match the id in the shadowdata array
                                //console.log("hour:",chosenDate.hour);
                                //console.log(value);   
                                SurfacePvPotential = value["attributes"]["pvPotential"]["totalInvestment"];
                            }
                        }
                    }
                });
            } else {
                tileContent.forEach(t => {
                    if (t === pickedFeature) {
                        selectedFeatures.push(new featurevar(t, t.color));
                    }
                });
                //highlight newly selected feature
                tileContent.forEach(t => {
                    if (t === pickedFeature) {
                        t.color = Cesium.Color.LIME;
                    }
                });
            }

            var shadowhourvaluepercent = 100 - (shadowHourValue * 100)
            //set feature infobox description (surface view)
            var featureName = pickedFeature.getProperty("name");
            selectedEntity.name = featureName;
            selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
            viewer.selectedEntity = selectedEntity;
            selectedEntity.description =
                '<table class="cesium-infoBox-defaultTable"><tbody>' +
                "<tr><th>Surface_ID</th><td>" + pickedFeature.getProperty("gml_id") + "</td></tr>" +
                "<tr><th>u_Value</th><td>" + pickUValue + "</td></tr>" +
                "<tr><th>description</th><td>" + pickedFeature.getProperty("description") + "</td></tr>" +
                "<tr><th>feature_type</th><td>" + pickedFeature.getProperty("feature_type") + "</td></tr>" +
                "<tr><th>shadow value</th><td>" + shadowhourvaluepercent.toFixed(1) + "%" + "</td></tr>" +
                "<tr><th>totalInvestment</th><td>" + SurfacePvPotential + "</td></tr>" +

                "</tbody></table>";


        }

        //Building View
        else if (document.getElementById("building").checked) {
            resetRoofColors();
            //save the selected feature's original color
            if (pickedhigh) {
                highlightedFeatures.forEach(h => {
                    if (h.feature.getProperty("gml_parent_id") === selectpid) {
                        selectedFeatures.push(new featurevar(h.feature, h.originalColor));
                    }
                });
                highlightedFeatures = [];

                //highlight newly selected feature
                tileContent.forEach(t => {
                    if (t.getProperty("gml_parent_id") === selectpid) {
                        t.color = Cesium.Color.LIME;
                    }
                });

            } else {
                tileContent.forEach(t => {
                    if (t.getProperty("gml_parent_id") === selectpid) {
                        selectedFeatures.push(new featurevar(t, t.color));
                    }
                });

                //highlight newly selected feature
                tileContent.forEach(t => {
                    if (t.getProperty("gml_parent_id") === selectpid) {
                        t.color = Cesium.Color.LIME;
                    }
                });
            }

            buildings(gmlID)

            //set feature infobox description (building view)
            var featureName = pickedFeature.getProperty("name");
            selectedEntity.name = featureName;
            selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
            viewer.selectedEntity = selectedEntity;
            selectedEntity.description =
                '<table class="cesium-infoBox-defaultTable"><tbody>' +
                "<tr><th>Building_ID</th><td>" + pickedFeature.getProperty("gml_parent_id") + "</td></tr>" +
                "<tr><th>buildingFunction</th><td>" + pickBuildingFunction + "</td></tr>" +
                "<tr><th>yearOfConstruction</th><td>" + pickYearOfConstruction + "</td></tr>" +
                "<tr><th>height</th><td>" + pickHeight + "</td></tr>" +
                "<tr><th>heatedVolume</th><td>" + pickHeatedVolume + "</td></tr>" +
                "<tr><th>Total_Surface_Area</th><td>" + pickTotalSurfaceArea + "</td></tr>" +
                "<tr><th>rooftype</th><td>" + pickRoofType + "</td></tr>" +
                "</tbody></table>";

        }

        //Roof View
        //BUG: shows random attributes ui element ??
        else if (document.getElementById("roof").checked && roofViewActivated) {
            console.log("clicked when in roof view and on click");

            //looping threw all surfaces
            tileContent.forEach(t => {
                if (t.getProperty("description").includes("Roof")) { //HACK: checking if the are a roof surface (should come from feature_type)            
                    for (const [key, value] of Object.entries(shadowdata)) { //looping threw the shadowdata array 
                        if (key === t.getProperty("gml_id")) { //checking the id
                            //console.log(value); 
                            shadowHourValue = value[chosenDate.hour - 1]; //getting the current chosen hour from the timeline                 
                            t.color = Cesium.Color.fromCssColorString(getShadowPalette(shadowHourValue)); //coloring the surface                        
                        }
                    }

                }

            });
        }

    },
    Cesium.ScreenSpaceEventType.LEFT_CLICK);


//filling the table in the info sidebar with data    
function fillTableProperties(gID, sID) {

    if (drawBox === false) {
        swal("CAN'T LOAD DATA!", "mark an area first!", "error");
        document.getElementById("singleChartContainer").style.visibility = "hidden"
        document.getElementsByClassName('cesium-infoBox-defaultTable').style.display = 'none';

    } else {

        //Property BuildingFunction
        buildingFunctionSortPick.forEach((value, key) => {
            if (key === gID) {
                pickBuildingFunction = value
            }
        })

        //Property Year of Construction
        constructionYearSortPick.forEach((value, key) => {
            if (key === gID) {
                pickYearOfConstruction = value
            }
        })

        //Property height
        heightSortPick.forEach((value, key) => {
            if (key === gID) {
                pickHeight = value
            }
        })

        //Property HeatedVolume
        heatedVolumeSortPick.forEach((value, key) => {
            if (key === gID) {
                pickHeatedVolume = value
            }
        })

        //Property TotalSurfaceArea
        totalSurfaceAreaSortPick.forEach((value, key) => {
            if (key === gID) {
                var sum = 0
                value.forEach(element => {
                    sum += element.totalSurfaceArea
                });
                pickTotalSurfaceArea = sum
            }
        })

        //Property RoofType
        roofTypeSortPick.forEach((value, key) => {
            if (key === gID) {
                pickRoofType = value
            }
        })

        //Property UValue
        uValueSortPick.forEach((value, key) => {
            if (key === sID) {
                pickUValue = value
            }
        })
    }

}


function resetRoofColors() {
    tileContent.forEach(t => {
        if (t.getProperty("description").includes("Roof")) {
            for (const [key, value] of Object.entries(shadowdata)) {
                if (key === t.getProperty("gml_id")) {
                    t.color = Cesium.Color.WHITE;
                }
            }
        }
    });
}