var monthlyHeatingID = []
var monthlyHeatingDemandArray = []
var monthlyCoolingID = []
var monthlyCoolingDemandArray = []
var volumeValues = []
var volumeID = []

var singleChartSwitcher = ""

function buildings(gmlID) {
    //sets as default attribute monthly heating
    myChartBuilding("kWh", "Monthly Heating");
    addBarDataOneBuilding(buildingChart, monthlyHeatingID, monthlyHeatingDemandArray, monthlyHeatingDemandArray.length, gmlID, "heating")

    switch (singleChartSwitcher) {
        case "mh":

            myChartBuilding("kWh", "Monthly Heating");
            addBarDataOneBuilding(buildingChart, monthlyHeatingID, monthlyHeatingDemandArray, monthlyHeatingDemandArray.length, gmlID, "heating")

            break;
        case "mc":

            myChartBuilding("kWh", "Monthly Cooling");
            addBarDataOneBuilding(buildingChart, monthlyCoolingID, monthlyCoolingDemandArray, monthlyCoolingDemandArray.length, gmlID, "cooling")

            break;

        case "mh2":

            myChartBuilding("m2", "Monthly Heating per m²");
            addBarDataOneBuildingPerM2(buildingChart, monthlyHeatingID, monthlyHeatingDemandArray, volumeValues, monthlyHeatingDemandArray.length, gmlID, "heatingm2")

            break;

        case "mc2":

            myChartBuilding("m2", "Monthly Cooling per m²");
            addBarDataOneBuildingPerM2(buildingChart, monthlyCoolingID, monthlyCoolingDemandArray, volumeValues, monthlyCoolingDemandArray.length, gmlID, "coolingm2")

            break;

        case "mh3":

            myChartBuilding("m3", "Monthly Heating per m³");
            addBarDataOneBuildingPerM3(buildingChart, monthlyHeatingID, monthlyHeatingDemandArray, volumeValues, monthlyHeatingDemandArray.length, gmlID, "heatingm3")

            break;

        case "mc3":

            myChartBuilding("m3", "Monthly Cooling per m³");
            addBarDataOneBuildingPerM3(buildingChart, monthlyCoolingID, monthlyCoolingDemandArray, volumeValues, monthlyCoolingDemandArray.length, gmlID, "coolingm3")

            break;


    }

}

document.getElementById("monthlyCooling").addEventListener("click", function () {
    singleChartSwitcher = "mc"
    buildings(gmlID)
});
document.getElementById("monthlyHeating").addEventListener("click", function () {
    singleChartSwitcher = "mh"
    buildings(gmlID)
});
document.getElementById("monthlyCoolingPerM2").addEventListener("click", function () {
    singleChartSwitcher = "mc2"
    buildings(gmlID)
});
document.getElementById("monthlyHeatingPerM2").addEventListener("click", function () {
    singleChartSwitcher = "mh2"
    buildings(gmlID)
});
document.getElementById("monthlyCoolingPerM3").addEventListener("click", function () {
    singleChartSwitcher = "mc3"
    buildings(gmlID)
});
document.getElementById("monthlyHeatingPerM3").addEventListener("click", function () {
    singleChartSwitcher = "mh3"
    buildings(gmlID)
});



//attribut = monthlyHeating
function addmonthlyHeatingInfosToArrays(key, value) {
    monthlyHeatingID.push(key)
    monthlyHeatingDemandArray.push(value)
}

//attribut = monthlyCooling
function addmonthlyCoolingInfosToArrays(key, value) {
    monthlyCoolingID.push(key)
    monthlyCoolingDemandArray.push(value)
}
function addVolumeValues(key, value) {
    volumeID.push(key)
    volumeValues.push(value)
}


//chart for single building
function myChartBuilding(type, mylabel) {
    if (buildingChart) {
        buildingChart.destroy();
    }
    buildingChart = new Chart(document.getElementById('buildingChart').getContext('2d'), {
        type: "bar",
        data: {
            labels: [],
            datasets: [{
                label: mylabel,
                data: [],
                backgroundColor: [],
                borderColor: [],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: "kWh"
                    },
                    ticks: {
                        beginAtZero: true,
                        stepSize: 50000
                    }
                }]
            }
        }
    });
    if (type === "m2") {
        buildingChart = new Chart(document.getElementById('buildingChart').getContext('2d'), {
            type: "bar",
            data: {
                labels: [],
                datasets: [{
                    label: mylabel,
                    data: [],
                    backgroundColor: [],
                    borderColor: [],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: "kWh/m²"
                        },
                        ticks: {
                            beginAtZero: true,
                            stepSize: 2.5
                        }
                    }]
                }
            }
        });
    }
    if (type === "m3") {
        buildingChart = new Chart(document.getElementById('buildingChart').getContext('2d'), {
            type: "bar",
            data: {
                labels: [],
                datasets: [{
                    label: mylabel,
                    data: [],
                    backgroundColor: [],
                    borderColor: [],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: "kWh/m³"
                        },
                        ticks: {
                            beginAtZero: true,
                            stepSize: 0.25
                        }
                    }]
                }
            }
        });
    }
}



function addBarDataOneBuilding(chart, ID, data, valueArrayLength, gID, colorType) {

    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

    for (var i = 0; i < valueArrayLength; i++) {

        if (gID === ID[i]) {
            for (var h = 0; h < 12; h++) {
                chart.data.labels.push(months[h])
                chart.data.datasets.forEach((dataset) => {
                    dataset.data.push(data[i][h]);
                    dataset.backgroundColor.push(color(data[i][h], colorType))
                });
            }

        }
    }
    chart.update();
}

function addBarDataOneBuildingPerM2(chart, ID, data, volume, valueArrayLength, gID, colorType) {

    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    for (var i = 0; i < valueArrayLength; i++) {

        if (gID === ID[i]) {

            for (var h = 0; h < 12; h++) {
                chart.data.labels.push(months[h])
                chart.data.datasets.forEach((dataset) => {
                    dataset.data.push(data[i][h] / pickTotalSurfaceArea)
                    dataset.backgroundColor.push(color(data[i][h] / pickTotalSurfaceArea, colorType))
                });
            }

        }
    }
    chart.update();
}
function addBarDataOneBuildingPerM3(chart, ID, data, volume, valueArrayLength, gID, colorType) {

    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    for (var i = 0; i < valueArrayLength; i++) {
        if (gID === ID[i]) {
            for (var h = 0; h < 12; h++) {
                chart.data.labels.push(months[h])
                var sum = 0
                chart.data.datasets.forEach((dataset) => {
                    sum = data[i][h] / volume[i]
                    dataset.data.push(sum)
                    dataset.backgroundColor.push(color(sum, colorType))
                });
            }
        }
    }
    chart.update();
}


function color(value, colorType) {
    if (colorType === "heating") {
        if (value > 0 && value <= 50000) return "#00ff00"
        if (value > 50000 && value <= 75000) return "#85c942"
        if (value > 75000 && value <= 100000) return "#ccff66"
        if (value > 100000 && value <= 150000) return "#ffff00"
        if (value > 150000 && value <= 200000) return "#ffc200"
        if (value > 200000 && value <= 250000) return "#ff6600"
        if (value > 250000) return "#ff0000"
    }

    if (colorType === "cooling") {
        if (value > 0 && value <= 15000) return "rgb(176,224,230)"
        if (value > 15000 && value <= 30000) return "rgb(135,206,250)"
        if (value > 30000 && value <= 45000) return "rgb(30,144,255)"
        if (value > 45000 && value <= 60000) return "rgb(65,105,225)"
    }

    if (colorType === "heatingm2") {
        if (value > 0 && value <= 2) return "#00ff00"
        if (value > 2 && value <= 5) return "#85c942"
        if (value > 5 && value <= 10) return "#ccff66"
        if (value > 10 && value <= 14) return "#ffff00"
        if (value > 14 && value <= 18) return "#ffc200"
        if (value > 18 && value <= 22) return "#ff6600"
        if (value > 22) return "#ff0000"
    }

    if (colorType === "coolingm2") {
        if (value > 0 && value <= 0.5) return "rgb(176,224,230)"
        if (value > 0.5 && value <= 2.0) return "rgb(135,206,250)"
        if (value > 2.0 && value <= 3.5) return "rgb(30,144,255)"
        if (value > 3.5 && value <= 6.0) return "rgb(65,105,225)"
    }

    if (colorType === "heatingm3") {
        if (value > 0 && value <= 1) return "#00ff00"
        if (value > 1 && value <= 2) return "#85c942"
        if (value > 2 && value <= 3) return "#ccff66"
        if (value > 3 && value <= 4) return "#ffff00"
        if (value > 4 && value <= 5) return "#ffc200"
        if (value > 5 && value <= 6) return "#ff6600"
        if (value > 6) return "#ff0000"
    }

    if (colorType === "coolingm3") {
        if (value > 0 && value <= 0.75) return "rgb(176,224,230)"
        if (value > 0.75 && value <= 1.25) return "rgb(135,206,250)"
        if (value > 1.25 && value <= 1.5) return "rgb(30,144,255)"
        if (value > 1.5 && value <= 2) return "rgb(65,105,225)"
    }

}