import { generatePieTable } from "../utils/tableGenerator.js";

export function renderAnalysisDistributionChart(
    chartData,
    containerId,
    tableContainerId,
) {
    // Pulizia del contenitore del grafico
    const chartContainer = document.querySelector(`#${containerId}`);
    if (chartContainer) {
        chartContainer.innerHTML = "";
    } else {
        console.error(`Contenitore del grafico non trovato: #${containerId}`);
        return;
    }

    // Estrai i dati per il grafico a torta
    const analysisDistribution = chartData || [];
    const labels = analysisDistribution.map((item) => item.analysisName);
    const series = analysisDistribution.map((item) => {
        const value = parseInt(item.totalTests);
        return isNaN(value) || value < 0 ? 0 : value;
    });

    // Verifica se ci sono dati validi da visualizzare
    const hasValidData = series.some((value) => value > 0);
    if (!hasValidData) {
        chartContainer.innerHTML =
            '<p class="text-center text-muted">No valid data to display.</p>';
        return;
    }

    // Configurazione del grafico a torta
    const options = {
        series: series,
        chart: {
            type: "pie",
            height: 350,
            toolbar: {
                show: true,
                tools: {
                    download: true,
                    selection: false,
                    zoom: false,
                    zoomin: false,
                    zoomout: false,
                    pan: false,
                    reset: false,
                },
            },
        },
        labels: labels,
        colors: [
            "#FF4560",
            "#008FFB",
            "#00E396",
            "#FEB019",
            "#FF66FF",
            "#775DD0",
            "#546E7A",
            "#26A69A",
            "#D81B60",
            "#F06292",
            "#4FC3F7",
            "#AED581",
            "#FF8A65",
            "#A1887F",
            "#E0E0E0",
            "#90A4AE",
            "#FFCA28",
            "#78909C",
            "#D4E157",
            "#F4FF81",
        ],
        responsive: [
            {
                breakpoint: 480,
                options: {
                    chart: {
                        width: 200,
                    },
                    legend: {
                        position: "bottom",
                    },
                },
            },
        ],
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + " tests";
                },
            },
        },
    };

    // Render del grafico
    const chart = new ApexCharts(chartContainer, options);
    chart.render();

    // Forza un aggiornamento del grafico dopo un breve ritardo
    setTimeout(() => {
        chart.updateOptions({});
    }, 100);

    // Genera la tabella usando la funzione esistente
    const tableHTML = generatePieTable(labels, series);

    const tableContainer = document.querySelector(`#${tableContainerId}`);
    if (tableContainer) {
        tableContainer.innerHTML = tableHTML;
    } else {
        console.error(
            `Contenitore della tabella non trovato: #${tableContainerId}`,
        );
    }
}