let areaChart;
let buildingChart;

var surfaceIDColorMAP = new Map()
var uValue = []
var uValuesAll = []
var uFrequency = []

var heightIDs = []
var heightValues = []

var heatedVolumeIDs = []
var heatedVolumeValues = []

var yearOfConstructionValues = []
var year = []
var yocFrequency = []

var buildingTypeValues = []
var buildingType = []
var btFrequency = []

var heatingSumMAP = new Map()
var heatingIDColorMAP = new Map()
var yearlyHeatingID = []
var yearlyHeatingDemandArray = []

var coolingSumMAP = new Map()
var yearlyCoolingID = []
var yearlyCoolingDemandArray = []

var coloR = []
var colorUValues = []
var colorHeight = []
var colorHeatedVolume = []
var colorYearOfConstruction = []
var colorHeatingDemand = []
var colorCoolingDemand = []

var buttonUValue = document.getElementById("surfaceChartAttribute")
var buttonHeight = document.getElementById("height")
var buttonHeatedVolume = document.getElementById("heatedVolume")
var buttonYearOfConstruction = document.getElementById("yearOfConstruction")
var buttonBuildingFunction = document.getElementById("buildingFunction")
var buttonYearlyHeatingDemand = document.getElementById("yearlyHeatingDemand")
var buttonYearlyCoolingDemand = document.getElementById("yearlyCoolingDemand")


buttonUValue.addEventListener("click", function () {
    myChartArea("bar", "uValue", 10, "uValues", "Frequency", colorUValues)
    addGlobalData(areaChart, uValue, uFrequency, uFrequency.length)
});

buttonHeight.addEventListener("click", function () {
    myChartArea("bar", "Buildingpart Height", 2, "ID", "Height", colorHeight)
    addGlobalData(areaChart, heightIDs, heightValues, heightIDs.length)
});

buttonHeatedVolume.addEventListener("click", function () {
    myChartArea("bar", "Heated Volume", 1000, "Part ID", "Heated Volume", colorHeatedVolume);
    addGlobalData(areaChart, heatedVolumeIDs, heatedVolumeValues, heatedVolumeIDs.length)
});

buttonYearOfConstruction.addEventListener("click", function () {
    myChartArea("bar", "Year of Construction", 1, "Year", "Frequency", colorYearOfConstruction);
    addGlobalData(areaChart, year, yocFrequency, yocFrequency.length)
});

buttonBuildingFunction.addEventListener("click", function () {
    myChartArea("bar", "Building Function", 1, "Building Type", "Frequency", coloR);
    addGlobalData(areaChart, buildingType, btFrequency, btFrequency.length)
});

buttonYearlyHeatingDemand.addEventListener("click", function () {
    myChartArea("bar", "Yearly Heating Demand", 1000, "Part ID", "Heating Demand", colorHeatingDemand);
    addGlobalData(areaChart, yearlyHeatingID, yearlyHeatingDemandArray, yearlyHeatingDemandArray.length)
});

buttonYearlyCoolingDemand.addEventListener("click", function () {
    myChartArea("bar", "Yearly Cooling Demand", 1000, "Part ID", "Cooling Demand", colorCoolingDemand);
    addGlobalData(areaChart, yearlyCoolingID, yearlyCoolingDemandArray, yearlyCoolingDemandArray.length)
});

//pushes bar and pie data in diagram (global)
function addGlobalData(chart, newLabels, data, valueArrayLength) {
    for (var i = 0; i < valueArrayLength; i++) {
        chart.data.labels.push(newLabels[i])
        chart.data.datasets.forEach((dataset) => {
            dataset.data.push(data[i]);
        });
    }
    chart.update();
}

var colorCounterH = 0
//generates colors for charts
var dynamicColors = function () {
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    return "rgb(" + r + "," + g + "," + b + ")";
}

function addHeightInfosToArrays(key, value) {
    colorCounterH++
    heightIDs.push(key)
    heightValues.push(value)
    if (colorCounterH < 4) {
        colorHeight.push("rgb(65,105,225)")
        colorCoolingDemand.push("rgb(65,105,225)")
    }
    if (colorCounterH >= 4 && colorCounterH < 8) {
        colorHeight.push("rgb(30,144,255)")
        colorCoolingDemand.push("rgb(30,144,255)")
    }
    if (colorCounterH >= 8 && colorCounterH < 12) {
        colorHeight.push("rgb(135,206,250)")
        colorCoolingDemand.push("rgb(135,206,250)")
    }
    if (colorCounterH >= 12) {
        colorHeight.push("rgb(176,224,230)")
        colorCoolingDemand.push("rgb(176,224,230)")
    }
}

colorCounterHV = 0
function addHeatedVolumeInfosToArrays(key, value) {
    colorCounterHV++
    heatedVolumeIDs.push(key)
    heatedVolumeValues.push(value)
    if (colorCounterHV < 4) colorHeatedVolume.push("rgb(128,0,0)")
    if (colorCounterHV >= 4 && colorCounterHV < 8) colorHeatedVolume.push("rgb(178,34,34)")
    if (colorCounterHV >= 8 && colorCounterHV < 12) colorHeatedVolume.push("rgb(205,92,92)")
    if (colorCounterHV >= 12) colorHeatedVolume.push("rgb(250,128,114)")
}

//attribut = year of construction
function yearFrequency() {
    const map = yearOfConstructionValues.reduce((acc, e) => acc.set(e, (acc.get(e) || 0) + 1), new Map())
    for (var [key, value] of map) {
        year.push(key)
        yocFrequency.push(value)
        if (key < 1980) colorYearOfConstruction.push("rgb(255,215,0)")
        if (key >= 1980 && key < 1990) colorYearOfConstruction.push("rgb(255,165,0)")
        if (key >= 1990 && key < 2000) colorYearOfConstruction.push("rgb(255,127,80)")
        if (key >= 2000) colorYearOfConstruction.push("rgb(255,69,0)")
    }
}

//attribut = building function
function buildingTypeFrequency() {
    const map = buildingTypeValues.reduce((acc, e) => acc.set(e, (acc.get(e) || 0) + 1), new Map())
    const mapSort = new Map([...map.entries()].sort((a, b) => b[1] - a[1]));
    for (var [key, value] of mapSort) {
        buildingType.push(key)
        btFrequency.push(value)
        coloR.push(dynamicColors())
    }
}

function uValueFrequency() {
    const map = uValuesAll.reduce((acc, e) => acc.set(e, (acc.get(e) || 0) + 1), new Map())
    for (var [key, value] of map) {
        uValue.push(key)
        uFrequency.push(value)
        if (key < 0.25) colorUValues.push("#ffcc99")
        if (key >= 0.25 && key < 0.5) colorUValues.push("#bf99b2")
        if (key >= 0.5 && key < 0.75) colorUValues.push("#997ac2")
        if (key >= 0.75 && key < 1) colorUValues.push("#5900a6")
        if (key >= 1) colorUValues.push("#0d0afa")
    }
}

function uValueSurfaces(key, value) {
    //console.log(key + " " + value)
    if (value < 0.25) surfaceIDColorMAP.set(key, "#ffcc99")
    if (value >= 0.25 && value < 0.5) surfaceIDColorMAP.set(key, "#bf99b2")
    if (value >= 0.5 && value < 0.75) surfaceIDColorMAP.set(key, "#997ac2")
    if (value >= 0.75 && value < 1) surfaceIDColorMAP.set(key, "#5900a6")
    if (value >= 1) surfaceIDColorMAP.set(key, "#0d0afa")
}

//calculates yearly heating demand (valueArray = 12 months)
function yearlyHeatingDemand(key, valueArray) {
    let sum = (valueArray.reduce((total, arg) => total + arg, 0))
    heatingSumMAP.set(key, sum)
}
//calculates yearly cooling demand (valueArray = 12 months)
function yearlyCoolingDemand(key, valueArray) {
    let sum = (valueArray.reduce((total, arg) => total + arg, 0))
    coolingSumMAP.set(key, sum)
}

//sorts yearly heating demand
function sortMap() {
    var heatingSumSort = new Map([...heatingSumMAP.entries()].sort((a, b) => b[1] - a[1]));
    heatingSumSort.forEach((value, key) => {
        yearlyHeatingID.push(key)
        yearlyHeatingDemandArray.push(value)
        if (value > 0 && value <= 20000) {
            colorHeatingDemand.push("#00ff00")
            heatingIDColorMAP.set(key, "#00ff00")
        }
        if (value > 20000 && value <= 40000) {
            colorHeatingDemand.push("#85c942")
            heatingIDColorMAP.set(key, "#85c942")
        }
        if (value > 40000 && value <= 60000) {
            colorHeatingDemand.push("#ccff66")
            heatingIDColorMAP.set(key, "#ccff66")
        }
        if (value > 60000 && value <= 80000) {
            colorHeatingDemand.push("#ffff00")
            heatingIDColorMAP.set(key, "#ffff00")
        }
        if (value > 80000 && value <= 1000000) {
            colorHeatingDemand.push("#ffc200")
            heatingIDColorMAP.set(key, "#ffc200")
        }
        if (value > 1000000 && value <= 1200000) {
            colorHeatingDemand.push("#ff6600")
            heatingIDColorMAP.set(key, "#ff6600")
        }
        if (value > 1200000 && value <= 1400000) {
            colorHeatingDemand.push("#ff0000")
            heatingIDColorMAP.set(key, "#ff0000")
        }
        if (value > 1400000) {
            colorHeatingDemand.push("#800000")
            heatingIDColorMAP.set(key, "#800000")
        }
    })

    var coolingSumSort = new Map([...coolingSumMAP.entries()].sort((a, b) => b[1] - a[1]));
    coolingSumSort.forEach((value, key) => {
        yearlyCoolingID.push(key)
        yearlyCoolingDemandArray.push(value)
    })
}

//global charts
function myChartArea(type, label, stepSize, xAxes, yAxes, coloR) {
    destroyChart()
    var myData = {
        labels: [],
        datasets: [{
            label: false,
            data: [],
            backgroundColor: coloR,
            borderColor: [],
            borderWidth: 1,
            fill: false,
        }]
    }
    var title = {
        display: true,
        position: "top",
        text: label,
        fontSize: 13.5,
        fontFamily: "Helvetica",
        fontStyle: 'bold',
    }
    var options = {
        scales: {
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: yAxes
                },
                ticks: {
                    maxTicksLimit: 10,
                    beginAtZero: true,
                    stepSize: stepSize
                }
            }],
            xAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: xAxes
                }
            }]
        },
        title: title,
        legend: {
            display: false
        },
    }
    var optionsPiDoughnut = {
        legend: {
            display: true,
            position: "right"
        },
        layout: {
            padding: {
                left: 50,
                right: 0,
                top: 30,
                bottom: 50
            }
        },
        title: title,
    }


    if (type === "bar") {
        areaChart = new Chart(document.getElementById('areaChart').getContext('2d'), {
            type: type,
            data: myData,
            options: options
        });
    }

    document.getElementById("option1").onchange = function () {
        destroyChart()
        areaChart = new Chart(document.getElementById('areaChart').getContext('2d'), {
            type: "bar",
            data: myData,
            options: options
        });
    };
    document.getElementById("option2").onchange = function () {
        destroyChart()
        areaChart = new Chart(document.getElementById('areaChart').getContext('2d'), {
            type: "line",
            data: myData,
            options: options
        });
    };
    document.getElementById("option3").onchange = function () {
        destroyChart()
        areaChart = new Chart(document.getElementById('areaChart').getContext('2d'), {
            type: "pie",
            data: myData,
            options: optionsPiDoughnut
        });
    };
    document.getElementById("option4").onchange = function () {
        destroyChart()
        areaChart = new Chart(document.getElementById('areaChart').getContext('2d'), {
            type: "doughnut",
            data: myData,
            options: optionsPiDoughnut
        });
    };
}

function destroyChart() {
    if (areaChart) {
        areaChart.destroy();
    }
}

function availableAttributes() {
    if (uValue.length === 0) disableButton(buttonUValue)
    if (heightValues.length === 0) disableButton(buttonHeight)
    if (heatedVolumeValues.length === 0) disableButton(buttonHeatedVolume)
    if (yearOfConstructionValues.length === 0) disableButton(buttonYearOfConstruction)
    if (buildingTypeValues.length === 0) disableButton(buttonBuildingFunction)
    if (yearlyHeatingDemandArray.length === 0) disableButton(buttonYearlyHeatingDemand)
    if (yearlyCoolingDemandArray.length === 0) disableButton(buttonYearlyCoolingDemand)
}

function disableButton(button) {
    button.style.color = "#A8A8A8"
    button.style.background = '#D3D3D3';
    button.disabled = true
}

function enableButtons(button) {
    button.style.color = "#000000"
    button.style.background = '#ffffff';
    button.disabled = false
}

function deleteMapEntries(map) {
    map.forEach((value, key) => {
        map.delete(key)
        map.delete(value)
    })
}

function resetCharts() {
    uValue = []
    uValuesAll = []
    uFrequency = []

    heightIDs = []
    heightValues = []

    heatedVolumeIDs = []
    heatedVolumeValues = []

    yearOfConstructionValues = []
    year = []
    yocFrequency = []

    buildingTypeValues = []
    buildingType = []
    btFrequency = []

    yearlyHeatingID = []
    yearlyHeatingDemandArray = []

    yearlyCoolingID = []
    yearlyCoolingDemandArray = []

    coloR = []
    colorUValues = []
    colorHeight = []
    colorHeatedVolume = []
    colorYearOfConstruction = []
    colorHeatingDemand = []
    colorCoolingDemand = []

    monthlyHeatingID = []
    monthlyHeatingDemandArray = []
    monthlyCoolingID = []
    monthlyCoolingDemandArray = []

    colorCounterHV = 0
    colorCounterH = 0

    singleChartSwitcher = ""

    deleteMapEntries(surfaceIDColorMAP)
    deleteMapEntries(heatingSumMAP)
    deleteMapEntries(heatingIDColorMAP)
    deleteMapEntries(coolingSumMAP)

    enableButtons(buttonUValue)
    enableButtons(buttonHeight)
    enableButtons(buttonHeatedVolume)
    enableButtons(buttonYearOfConstruction)
    enableButtons(buttonBuildingFunction)
    enableButtons(buttonYearlyHeatingDemand)
    enableButtons(buttonYearlyCoolingDemand)

    document.getElementById('checkbox1').checked = false
    document.getElementById('checkbox2').checked = false
    document.getElementById('heat-demand-legend').style.visibility = 'hidden';
    tileContent.forEach(t => t.color = new Cesium.Color(1, 1, 1, 1))
}