// DoughnutChart.js
import React from 'react';
import { Doughnut } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  ArcElement,
  Tooltip,
  Legend,
} from 'chart.js';

// 

const DoughnutChart = () => {
  const doughnutChartData = {
    labels: ["Download Sales", "In-Store Sales", "Mail-Order Sales"],
    datasets: [
      {
        data: [350, 450, 100],
        backgroundColor: [
          'rgba(255, 99, 132, 0.6)',
          'rgba(54, 162, 235, 0.6)',
          'rgba(255, 206, 86, 0.6)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)'
        ],
        borderWidth: 1,
      },
    ],
  };

  const doughnutChartOptions = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Doughnut Chart',
      },
    },
  };

  const handleChartClick = (event, elements) => {
    if (elements.length > 0) {
      const { index } = elements[0].element.$context;
      console.log(`Clicked on:`, doughnutChartData.labels[index]);
    }
  };

  const handleChartHover = (event, elements) => {
    if (elements.length > 0) {
      console.log('Hovered over:', elements);
    }
  };

  return (
    <div style={{ display: 'block', width: '600px', margin: 'auto' }}>
      <Doughnut
        data={doughnutChartData}
        options={doughnutChartOptions}
        onClick={(event, elements) => handleChartClick(event, elements)}
        onHover={(event, elements) => handleChartHover(event, elements)}
      />
    </div>
  );
};

export default DoughnutChart;
