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

export function renderPieChart(data, containerId, tableContainerId) {
    // Pulizia del contenitore
    document.querySelector(`#${containerId}`).innerHTML = "";

    // Dati per il grafico a torta
    const intFailReports = parseInt(data.failReportsPie);
    const intPassReports = parseInt(data.passReportsPie);
    const intOtherReports = parseInt(data.otherReportsPie);

    const pieLabels = ["Fail", "Pass", "Others"];
    const pieSeries = [intFailReports, intPassReports, intOtherReports];

    // Configurazione del grafico
    const options = {
        series: pieSeries,
        chart: {
            width: "100%",
            type: "pie",
            toolbar: {
                show: true,
                tools: {
                    download: true,
                    selection: false,
                    zoom: false,
                    zoomin: false,
                    zoomout: false,
                    pan: false,
                    reset: false,
                },
            },
        },
        labels: pieLabels,
        colors: ["#FF4D4D", "#28A745", "#FFA500"],
        responsive: [
            {
                breakpoint: 480,
                options: {
                    chart: {
                        width: 250,
                    },
                    legend: {
                        position: "bottom",
                    },
                },
            },
        ],
        legend: {
            position: "bottom",
            offsetY: 0,
            height: 50,
        },
    };

    // Render del grafico
    const chart = new ApexCharts(
        document.querySelector(`#${containerId}`),
        options,
    );
    chart.render();

    // Genera la tabella
    document.querySelector(`#${tableContainerId}`).innerHTML = generatePieTable(
        pieLabels,
        pieSeries,
    );
}