require("flatpickr");

import '@fortawesome/fontawesome-free/css/all.min.css';
import Chart from 'chart.js/auto';

const chartColours = [
    'rgb(8, 145, 178)',
    'rgb(37, 99, 235)',
    'rgb(79, 70, 229)',
    'rgb(14, 116, 144)',
];

function parseJsonAttribute(element, attribute, fallback = []) {
    try {
        return JSON.parse(element.getAttribute(attribute) || JSON.stringify(fallback));
    } catch (error) {
        return fallback;
    }
}

function renderWmsCharts() {
    document.querySelectorAll('[data-wms-chart]').forEach((canvas) => {
        if (canvas.dataset.rendered === 'true') {
            return;
        }

        const type = canvas.getAttribute('data-wms-chart');
        const labels = parseJsonAttribute(canvas, 'data-labels');
        const series = parseJsonAttribute(canvas, 'data-series');
        const values = parseJsonAttribute(canvas, 'data-values');

        const datasets = series.length
            ? series.map((item, index) => ({
                label: item.label,
                data: item.data,
                backgroundColor: chartColours[index % chartColours.length],
                borderColor: chartColours[index % chartColours.length],
                borderWidth: 2,
                borderRadius: 8,
            }))
            : [{
                label: 'Total',
                data: values,
                backgroundColor: chartColours,
                borderColor: 'rgb(255, 255, 255)',
                borderWidth: 2,
            }];

        new Chart(canvas, {
            type,
            data: {
                labels,
                datasets,
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        labels: {
                            color: document.documentElement.classList.contains('dark') ? '#e4e4e7' : '#3f3f46',
                            boxWidth: 12,
                            boxHeight: 12,
                        },
                    },
                },
                scales: type === 'doughnut'
                    ? {}
                    : {
                        x: {
                            ticks: {
                                color: document.documentElement.classList.contains('dark') ? '#d4d4d8' : '#52525b',
                            },
                            grid: {
                                color: 'rgba(113, 113, 122, 0.18)',
                            },
                        },
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0,
                                color: document.documentElement.classList.contains('dark') ? '#d4d4d8' : '#52525b',
                            },
                            grid: {
                                color: 'rgba(113, 113, 122, 0.18)',
                            },
                        },
                    },
            },
        });

        canvas.dataset.rendered = 'true';
    });
}

document.addEventListener('DOMContentLoaded', renderWmsCharts);
document.addEventListener('livewire:navigated', renderWmsCharts);