import Chart from 'chart.js/auto';
import ChartDataLabels from 'chartjs-plugin-datalabels';

function buildDataChart(level) {
  const scoreDistribution = level.querySelectorAll(
    '.game_stats__scores-distribution .score-data'
  );
  const scoreDistributionDataset = [];

  for (const score of scoreDistribution) {
    scoreDistributionDataset.push({
      label: '# of Votes',
      score: score.getAttribute('score') + 'points',
      count: score.getAttribute('count'),
    });
  }

  console.log('score', scoreDistribution);
  console.log(scoreDistributionDataset);

  const colorPalettes = [
    ['#1d4ed8', '#3b82f6', '#60a5fa', '#93c5fd', '#c3dafe'],
    ['#1d4ed8', '#3c67dc', '#5b81e0', '#7a9be3', '#99b5e7'],
    ['#1223C2', '#030E8E', '#3D49C7', '#6D77D0'],
    ['#1d4ed8', '#3b82f6', '#60a5fa', '#93c5fd', '#c3dafe'],
    ['#1240a1', '#2e6ee0', '#548bf7', '#81aefd', '#a9d2ff'],
    ['#0a37a8', '#2d65d4', '#5794ff', '#7dbdff', '#a3dcff'],
    ['#1a3d9c', '#4271d9', '#75a7ff', '#9fc5ff', '#c6e2ff'],
    ['#084ba6', '#3a79d6', '#6ba5ff', '#96c3ff', '#badbff'],
    ['#1137a3', '#3267d6', '#5fa3ff', '#8fc1ff', '#b5e0ff'],
  ];

  const dataTruc = {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [
      {
        label: 'My First Dataset',
        data: [300, 50, 100],
        backgroundColor: [
          'rgb(255, 99, 132)',
          'rgb(54, 162, 235)',
          'rgb(255, 205, 86)',
        ],
        hoverOffset: 4,
      },
    ],
  };
  const data = {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [
      {
        label: 'My First Dataset',
        data: [300, 50, 100],
        backgroundColor: [
          'rgb(255, 99, 132)',
          'rgb(54, 162, 235)',
          'rgb(255, 205, 86)',
        ],
        hoverOffset: 4,
      },
    ],
  };

  new Chart(
    document.getElementById('graphic-score-repartition'),
    {
      type: 'doughnut',
      options: {
        animation: true,
        layout: {
          padding: {
            right: 50,
          },
        },
        plugins: {
          legend: {
            position: 'bottom',
          },
          tooltip: {
            enabled: false,
          },
        },
      },
      data: {
        labels: scoreDistributionDataset.map(
          (scoreData) => scoreData.score
        ),
        datasets: [
          {
            label: scoreDistributionDataset.map(
              (scoreData) => scoreData.count
            ),
            backgroundColor: colorPalettes[4],
            data: scoreDistributionDataset.map(
              (scoreData) => scoreData.score
            ),
            hoverOffset: 14,
          },
        ],
      },
    }
  );
}
function buildDataChart2(level) {
  const scoreDistribution = level.querySelectorAll(
    '.game_stats__scores-distribution .score-data'
  );
  const scoreDistributionDataset = [];

  for (const score of scoreDistribution) {
    scoreDistributionDataset.push({
      score: score.getAttribute('score') + ' pts',
      count: score.getAttribute('count'),
    });
  }
  // const data = [
  //   { team: 'Red Jaguars', score: 8 },
  //   { team: 'Blue Barracudas', score: 23 },
  //   { team: 'Green Monkeys', score: 3 },
  //   { team: 'Orange Iguanas', score: 15 },
  //   { team: 'Purple Parrots', score: 7 },
  //   { team: 'Silver Snakes', score: 1 },
  // ];
  // console.log('dta', data);
  const colorPalettes = [
    ['#1d4ed8', '#3b82f6', '#60a5fa', '#93c5fd', '#c3dafe'],
    ['#1d4ed8', '#3c67dc', '#5b81e0', '#7a9be3', '#99b5e7'],
    ['#1223C2', '#030E8E', '#3D49C7', '#6D77D0'],
    ['#1d4ed8', '#3b82f6', '#60a5fa', '#93c5fd', '#c3dafe'],
    ['#1240a1', '#2e6ee0', '#548bf7', '#81aefd', '#a9d2ff'],
    ['#0a37a8', '#2d65d4', '#5794ff', '#7dbdff', '#a3dcff'],
    ['#1a3d9c', '#4271d9', '#75a7ff', '#9fc5ff', '#c6e2ff'],
    ['#084ba6', '#3a79d6', '#6ba5ff', '#96c3ff', '#badbff'],
    ['#1137a3', '#3267d6', '#5fa3ff', '#8fc1ff', '#b5e0ff'],
  ];

  console.log('score', scoreDistributionDataset);
  new Chart(
    document.getElementById('graphic-score-repartition'),
    {
      type: 'pie',
      data: {
        labels: scoreDistributionDataset.map(
          (row) => row.score
        ),
        datasets: [
          {
            backgroundColor: colorPalettes[4],
            label: 'Nombres de joueurs',
            data: scoreDistributionDataset.map(
              (row) => row.count
            ),
            hoverOffset: 50,
          },
        ],
      },
      plugins: [ChartDataLabels],
      options: {
        plugins: {
          legend: {
            display: false,
            position: 'bottom',
          },

          title: {
            display: false,
            text: 'Custom Chart Title',
          },
          datalabels: {
            color: '#fff',
            anchor: 'center',
            font: {
              size: 20,
            },
            formatter: (value, context) => {
              return context.chart.data.labels[
                context.dataIndex
              ];
            },

            // align: 'center',
            // offset: 10,
            // borderWidth: 2,
            // borderColor: '#fff',
            // borderRadius: 25,
          },
        },
      },
    }
  );
}

window.addEventListener('DOMContentLoaded', (event) => {
  const levels = document.querySelectorAll('.game_stats');
  levels.forEach((level) => {
    buildDataChart2(level);
    function updatePercentage(percentage) {
      const overlay = document.querySelector(
        '.donut-chart__overlay'
      );
      const text = document.querySelector(
        '.donut-chart__percentage'
      );
      overlay.style.transform = `rotate(${
        (percentage / 100) * 360
      }deg)`;
      text.textContent = `${percentage}%`;
    }

    // Exemple : mettre à jour le pourcentage à 75%
    updatePercentage(75);
  });
});