let shopping_result;

let shopping_chart = new Chart(document.getElementById("shopping_times_chart"), {
    type: 'bar',
    data: {
        labels: [1, 2, 3, 4, 5],
        datasets: [{
            label: 'Anzahl verkaufter Artikel',
            data: [0, 0, 0, 0, 0],
            backgroundColor: [
                'rgba(143, 170, 220, 0.9)',
                'rgba(143, 170, 220, 0.9)',
                'rgba(143, 170, 220, 0.9)',
                'rgba(143, 170, 220, 0.9)',
                'rgba(143, 170, 220, 0.9)',
                'rgba(143, 170, 220, 0.9)',
            ],
            borderColor: [
                'rgba(143, 170, 220, 1)',
                'rgba(143, 170, 220, 1)',
                'rgba(143, 170, 220, 1)',
                'rgba(143, 170, 220, 1)',
                'rgba(143, 170, 220, 1)',
                'rgba(143, 170, 220, 1)',
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        title: {
            display: false,
            text: 'Einkaufszeiten'
        },
        legend: {
            display: false
        },
        scales: {
            yAxes: [{
                categoryPercentage: 1.0,
                barPercentage: 0.5,
                ticks: {
                    beginAtZero: true
                }
            }],
            xAxes: [{
                gridLines: {
                    display: false
                },
            }]
        }
    }
});

$.ajax({
    url: 'shopping_times',
    dataType: 'json'
}).done(function (results) {
    shopping_result = results;
    updateDays();
});

function updateDays() {
    if(typeof shopping_result["Montag"] !== 'undefined') {
        let e = document.getElementById("day");
        let value = e.options[e.selectedIndex].text;
        shopping_chart.data.labels = shopping_result.labels;
        shopping_chart.data.datasets[0].data = shopping_result[value];

        let max = Math.max.apply(null, shopping_result[value]);
        let min = Math.min.apply(null, shopping_result[value]);
        let array = [];
        shopping_result[value].map(function (value) {
            if(value == max)
                value = 'rgba(129, 199, 132, 1)';
            else if(value == min) {
                value = 'rgba(239, 154, 154, 1)';
            }
            else {
                value = 'rgba(143, 170, 220, 0.9)';
            }
            array.push(value);
        });
        shopping_chart.data.datasets[0].backgroundColor = array;

        shopping_chart.update();
    }

}