import { Controller } from '@hotwired/stimulus'
import { Chart, BarController, BarElement, CategoryScale, LinearScale, Tooltip, Legend } from 'chart.js'

Chart.register(BarController, BarElement, CategoryScale, LinearScale, Tooltip, Legend)

/* stimulusFetch: 'lazy' */
export default class extends Controller {

    static targets = ['canvas']
    static values = {
        labels: Array,
        data: Array,
        title: String,
        color: { type: String, default: '#004b7a' },
        maxY: { type: Number, default: 5 },
    }

    connect() {
        this.chart = new Chart(this.canvasTarget, {
            type: 'bar',
            data: {
                labels: this.labelsValue,
                datasets: [{
                    label: 'Frage',
                    data: this.dataValue,
                    backgroundColor: this.colorValue,
                    borderWidth: 0,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.parsed.y.toFixed(2)
                            }
                        }
                    },
                    title: {
                        display: !!this.titleValue,
                        text: this.titleValue,
                    }
                },
                scales: {
                    y: {
                        beginAtZero: false,
                        min: 1,
                        max: this.maxYValue,
                        ticks: {
                            stepSize: 1,
                        }
                    },
                    x: {
                        grid: {
                            display: false,
                        }
                    }
                }
            }
        })
    }

    disconnect() {
        if (this.chart) {
            this.chart.destroy()
        }
    }
}