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

Chart.register(ChartDataLabels);

window.Webflow ||= [];
window.Webflow.push(() => {
  const ctx = (document.querySelector('[el="chart"]') as HTMLCanvasElement).getContext('2d');
  const isMobile = window.innerWidth < 768;

  function wrapText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number) {
    const words = text.split(' ');
    const lines = [];
    let currentLine = words[0];

    for (let i = 1; i < words.length; i++) {
      const word = words[i];
      const { width } = ctx.measureText(currentLine + ' ' + word);
      if (width < maxWidth) {
        currentLine += ' ' + word;
      } else {
        lines.push(currentLine);
        currentLine = word;
      }
    }
    lines.push(currentLine);
    return lines;
  }

  if (ctx) {
    // Create the doughnut chart
    new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: [
          'Visi ar daliniai statybos ir civilinės inžinerijos darbai',
          'Pastato užbaigimo darbai',
          'Elektra, šildymas, saulės ir branduolinė energija',
          'Kuras',
          'Baldai',
          'Medicinos įranga',
          'Statybos darbai',
          'Kompiuterinė įranga ir reikmenys',
          'Įvairūs maisto produktai',
          'Gyvūninės kilmės produktai, mėsa ir mėsos produktai',
        ],
        datasets: [
          {
            label: 'TOP 10 planuojamų pirkimų sritys 2024 m.',
            data: [8309065, 8082899, 6782939, 4106575, 3726120, 3533413, 3464645, 3192306, 2747631],
            // backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)'],
            hoverOffset: 4,
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '60%',
        plugins: {
          legend: {
            position: 'bottom',
            labels: {
              font: {
                size: isMobile ? 14 : 16,
              },
            },
          },
          tooltip: {
            callbacks: {
              title: function (tooltipItems) {
                return tooltipItems[0].label;
              },
              label: function (context) {
                return `${context.formattedValue} €`;
              },
            },
          },
          datalabels: {
            color: '#000',
            textAlign: 'center',
            font: {
              weight: 500,
              size: 12,
            },
            formatter: (value, context) => {
              const label = context.chart?.data?.labels?.[context.dataIndex];
              const { ctx } = context.chart;
              const maxWidth = 160; // Adjust the max width as needed
              const text = `${label}`; // Your text to display
              const lines = wrapText(ctx, text, maxWidth);

              // Return the text broken up into lines
              return lines;
            },
          },
        },
      },
    });
  }
});