const reset = document.getElementById("reset");
const currentClassProbabilitiesList = document.getElementById("class-probabilities");
const currentPredictedClass = document.getElementById('predicted-class')
const staticDiv = document.getElementById("static");
const dynamicDiv = document.getElementById("dynamic");
var chartData;



// Définir la fonction initializeChart en premier
function initializeChart(data, backgroundColor, borderColor, labels) {
  // Créer une nouvelle instance Chart.js pour chaque élément canvas avec la classe 'bestSellers'
  data = data.map(function (element) {
    return parseFloat(element).toFixed(2);
  });
  document.querySelectorAll('.bestSellers').forEach(function (canvas) {
    // Initialiser le graphique
    new Chart(canvas, {
      type: 'doughnut', // Définir le type de graphique sur doughnut
      data: {
        datasets: [{
          data: data,
          backgroundColor: backgroundColor,
          borderColor: borderColor,
        }],
        labels: labels
      },
      options: {
        responsive: true, // Rendre le graphique responsive
        cutoutPercentage: 80, // Définir le pourcentage de découpe
        legend: {
          display: false, // Masquer la légende
        },
        animation: {
          animateScale: true,
          animateRotate: true
        },
        plugins: {
          datalabels: {
            display: false,
            align: 'center',
            anchor: 'center'
          }
        }
      }
    });
  });
}
document.addEventListener('DOMContentLoaded', function() {
    loadResults();
});
function loadResults() {
    fetch('/voice')
        .then(response => response.text())
        .then(html => {
            const responseDOM = new DOMParser().parseFromString(html, "text/html");
            const classProbabilitiesList = responseDOM.getElementById("class-probabilities");
            currentClassProbabilitiesList.innerHTML = classProbabilitiesList.innerHTML;
            const PredictedClass = responseDOM.getElementById("predicted-class")
            currentPredictedClass.innerHTML = PredictedClass.innerHTML;

            var canvasElement = responseDOM.querySelector('.bestSellers'); // Sélectionnez le premier élément avec la classe 'bestSellers'
            console.log(canvasElement);
            chartData = canvasElement.getAttribute('data-chart');
            console.log(chartData);
            var data = JSON.parse(chartData).datasets[0].data.slice(0, 5);
            var backgroundColor = JSON.parse(chartData).datasets[0].backgroundColor.slice(0, 5);
            var borderColor = JSON.parse(chartData).datasets[0].borderColor.slice(0, 5);
            var labels = JSON.parse(chartData).labels.slice(0, 5);

            // Créer de nouveaux graphiques
            loadDashboardScript(data, backgroundColor, borderColor, labels);
        })
        .catch(error => console.error('Error:', error));
}



function loadDashboardScript(data, backgroundColor, borderColor, labels) { // Correction ici
  var scriptElement = document.createElement('script');
  scriptElement.type = 'text/javascript';
  scriptElement.src = '../static/js/dashboard_pdf.js';
  // Attendez que le script soit chargé avant d'appeler la fonction d'initialisation
  scriptElement.onload = function () {
    initializeChart(data, backgroundColor, borderColor, labels);
  };
  document.body.appendChild(scriptElement);
}

function destroyPreviousCharts() {
  // Trouver tous les éléments canvas avec la classe 'bestSellers'
  document.querySelectorAll('.bestSellers').forEach(function (canvas) {
    // Récupérer l'instance du graphique
    var chartInstance = Chart.getChart(canvas);
    // Si une instance existe, détruire le graphique
    if (chartInstance) {
      chartInstance.destroy();
    }
  });
}

function createResponseElement(response) {
  var pdfResponseElement = document.createElement('ul');
  pdfResponseElement.classList.add('graph-legend-rectangle');
  pdfResponseElement.innerHTML = response;
  return pdfResponseElement;
}

// Modifiez la fonction reloadDashboardScript pour accepter les données supplémentaires
function reloadDashboardScript(data, backgroundColor, borderColor, labels) {
  var scriptElement = document.createElement('script');
  scriptElement.type = 'text/javascript';
  scriptElement.src = `../static/js/dashboard_pdf.js?data=${encodeURIComponent(JSON.stringify(data))}&backgroundColor=${encodeURIComponent(JSON.stringify(backgroundColor))}&borderColor=${encodeURIComponent(JSON.stringify(borderColor))}&labels=${encodeURIComponent(JSON.stringify(labels))}`;
  document.body.appendChild(scriptElement);
}