import React, { useState } from 'react';
import { Scatter } from 'react-chartjs-2'; // Import Scatter chart from react-chartjs-2
import { Chart as ChartJS, Tooltip, Legend, ScatterElement, PointElement } from 'chart.js';

// ChartJS.register(Tooltip, Legend, ScatterElement, PointElement); // Register required chart elements for scatter chart

const ScatterChartComponent = () => {
  // Define scatter chart data, labels, and type
  const [scatterChartLabels] = useState([
    'Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'
  ]);

  const [scatterChartData] = useState([
    {
      data: [
        { x: 1, y: 1 },
        { x: 2, y: 3 },
        { x: 3, y: -2 },
        { x: 4, y: 4 },
        { x: 5, y: -3, r: 20 },
      ],
      label: 'Series A',
      pointRadius: 10,
      backgroundColor: [
        'red', 'green', 'blue', 'purple', 'yellow', 'brown', 'magenta', 'cyan', 'orange', 'pink'
      ]
    },
  ]);

  const [scatterChartType] = useState('scatter');

  // Handle chart hover and click events
  const chartClicked = (e) => {
    console.log(e);
  };

  const chartHovered = (e) => {
    console.log(e);
  };

  return (
    <div style={{ display: 'block' }}>
      <Scatter
        data={{
          datasets: scatterChartData,
        }}
        type={scatterChartType}
        onHover={chartHovered}
        onClick={chartClicked}
      />
    </div>
  );
};

export default ScatterChartComponent;
