{% load wagtailimages_tags %}
{% load wagtailcore_tags %}
{% load static %}

<link href="{% static 'wagtail_blocks/bootstrap.min.css' %}?v={{ VERSION }}" rel="stylesheet"/>
<script src="{% static 'wagtail_blocks/js/Chart.bundle.min.js' %}?v={{ VERSION }}"></script>

<div class="container">
    <div class="row text-center text-lg-left">
        <div class="col-lg-12 col-md-12 col-12">
            <canvas id="{{ block_id }}" height="40vh" width="80vw"></canvas>
        </div>
    </div>
</div>

<script>
    window.addEventListener("load",function(){
        const chart_type = '{{value.chart_type}}';
        let color_order = getRandomInt(6);
        const colors = [
            'rgba(255, 99, 132, 0.6)',
            'rgba(54, 162, 235, 0.6)',
            'rgba(255, 206, 86, 0.6)',
            'rgba(75, 192, 192, 0.6)',
            'rgba(153, 102, 255, 0.6)',
            'rgba(255, 159, 64, 0.6)',
            'rgba(75, 192, 192, 0.6)',
            'rgba(153, 102, 255, 0.6)',
        ];

        function get_color() {
            if(color_order === colors.length) {
                color_order = 0;
            }
            return(colors[color_order++]);
        }
        function getRandomInt(max) {
        return Math.floor(Math.random() * Math.floor(max));
        }

        function get_datasets() {
            const datasets = {{value.datasets|safe}};
            let final_datasets = [];
            for (let i = 0; i < datasets.length; i++) {
                let temp_dataset = {};
                temp_dataset['label'] = datasets[i]['label'];
                temp_dataset['data'] = datasets[i]['dataset_data'];
                if(chart_type == "pie" || chart_type == "doughnut" || datasets.length == 1) {
                    let backgroundColor = [];
                    for(let j=0; j < temp_dataset['data'].length; j++)
                        backgroundColor.push(get_color());
                    temp_dataset['backgroundColor'] = backgroundColor;
                } else {
                    temp_dataset['backgroundColor'] = get_color();
                }
                temp_dataset['borderColor'] = get_color();
                temp_dataset['borderWidth'] = 1;
                final_datasets.push(temp_dataset);
            }
            return(final_datasets);
        };

        const ctx = document.getElementById('{{ block_id }}').getContext('2d');
        const block_chart = new Chart(ctx, {
            type: '{{value.chart_type}}',
            data: {
                labels: {{value.labels|safe}},
                datasets: get_datasets(),
            },
        options: {
                title: {
                    display: true,
                    text: '{{value.title|escapejs}}'
                },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
        });
    })
</script>