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

function buildLevelDataCharts(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 colorPalettes = [
    '#1240a1',
    '#2e6ee0',
    '#548bf7',
    '#81aefd',
    '#a9d2ff',
  ];
  new Chart(
    level.querySelector('.graphic-score-repartition'),
    {
      type: 'pie',
      data: {
        labels: scoreDistributionDataset.map(
          (row) => row.score
        ),
        datasets: [
          {
            backgroundColor: colorPalettes,
            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,
          },
        },
      },
    }
  );
}
function buildRatingsDataChart() {
  const ratingDistribution = document.querySelectorAll(
    '.rating_stats .rating-data'
  );
  const ratingDistributionDataset = [];

  for (const rating of ratingDistribution) {
    ratingDistributionDataset.push({
      rating: rating.getAttribute('rating'),
      count: rating.getAttribute('count'),
    });
  }
  const colorPalettes = [
    '#1240a1',
    '#2e6ee0',
    '#548bf7',
    '#81aefd',
    '#a9d2ff',
  ];

  // console.log('score', scoreDistributionDataset);
  new Chart(
    document.getElementById('graphic-rating-repartition'),
    {
      type: 'pie',
      data: {
        labels: ratingDistributionDataset.map(
          (row) => row.rating
        ),
        datasets: [
          {
            backgroundColor: colorPalettes,
            label: 'Nombres de joueurs',
            data: ratingDistributionDataset.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) => {
    buildLevelDataCharts(level);
  });
  buildRatingsDataChart();
});