// BubbleChart.js
import React from 'react';
import { Bubble } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  LinearScale,
  PointElement,
  Tooltip,
  Legend,
  Title,
} from 'chart.js';

// ChartJS.register(LinearScale, PointElement, Tooltip, Legend, Title);

const BubbleChart = () => {
  const bubbleChartOptions = {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Bubble Chart',
      },
    },
    scales: {
      x: {
        min: 0,
        max: 30,
      },
      y: {
        min: 0,
        max: 30,
      },
    },
  };

  const bubbleChartData = {
    datasets: [
      {
        data: [
          { x: 10, y: 10, r: 10 },
          { x: 15, y: 5, r: 15 },
          { x: 26, y: 12, r: 23 },
          { x: 7, y: 8, r: 8 },
        ],
        label: 'Investment Equities',
        backgroundColor: 'rgba(255, 0, 0, 0.6)', // Red
        borderColor: 'blue',
        hoverBackgroundColor: 'purple',
        hoverBorderColor: 'red',
      },
      {
        data: [
          { x: 5, y: 15, r: 12 },
          { x: 20, y: 7, r: 8 },
          { x: 12, y: 18, r: 15 },
          { x: 8, y: 6, r: 10 },
        ],
        label: 'Investment Bonds',
        backgroundColor: 'rgba(0, 255, 0, 0.6)', // Green
        borderColor: 'green',
        hoverBackgroundColor: 'yellow',
        hoverBorderColor: 'blue',
      },
    ],
  };

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

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

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

export default BubbleChart;
