import {
    CategoryScale,
    Chart,
    Filler,
    Legend,
    LinearScale,
    LineController,
    LineElement,
    PointElement,
    Tooltip,
} from 'chart.js';

Chart.register(
    CategoryScale,
    Filler,
    Legend,
    LinearScale,
    LineController,
    LineElement,
    PointElement,
    Tooltip,
);

export default function trendChart({ labels = [], series = [] } = {}) {
    return {
        chart: null,

        init() {
            this.chart = new Chart(this.$refs.canvas, {
                type: 'line',
                data: this.data(labels, series),
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: { mode: 'index', intersect: false },
                    scales: {
                        y: { beginAtZero: true, ticks: { precision: 0 } },
                    },
                },
            });
        },

        data(labels, series) {
            return {
                labels,
                datasets: series.map((one, index) => ({
                    label: one.name,
                    data: one.values,
                    borderColor: this.palette(index),
                    backgroundColor: this.palette(index),
                    spanGaps: false,
                    tension: 0.3,
                })),
            };
        },

        palette(index) {
            return ['#3b82f6', '#10b981'][index % 2];
        },

        destroy() {
            this.chart?.destroy();
            this.chart = null;
        },
    };
}