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

export function renderBarChart(data, 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;
    }

    // Dati per il grafico a barre (usa gli stessi dati del grafico a torta)
    const intFailReports = parseInt(data.failReportsPie) || 0;
    const intPassReports = parseInt(data.passReportsPie) || 0;
    const intOtherReports = parseInt(data.otherReportsPie) || 0;

    const barLabels = ["Fail", "Pass", "Others"];
    const barSeries = [intFailReports, intPassReports, intOtherReports];

    // Configurazione del grafico a barre
    const options = {
        series: [
            {
                name: "Reports",
                data: barSeries,
            },
        ],
        chart: {
            height: 350,
            type: "bar",
            toolbar: {
                show: true,
                tools: {
                    download: true,
                    selection: false,
                    zoom: false,
                    zoomin: false,
                    zoomout: false,
                    pan: false,
                    reset: false,
                },
            },
        },
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: "55%",
                endingShape: "rounded",
            },
        },
        dataLabels: {
            enabled: false,
        },
        stroke: {
            show: true,
            width: 2,
            colors: ["transparent"],
        },
        xaxis: {
            categories: barLabels,
        },
        colors: ["#FF4D4D", "#28A745", "#FFA500"],
        fill: {
            opacity: 1,
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + " reports";
                },
            },
        },
    };

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

    // Genera la tabella e aggiungi un log
    const tableHTML = generatePieTable(barLabels, barSeries);

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