import React, { useEffect, useRef } from 'react';
import { Bar } from 'react-chartjs-2';

function StackedBarChart({ data }) {
  const chartRef = useRef(null);

  // Preprocess data for chart.js
  const preprocessData = (rawData) => {
    let labels = [...new Set(rawData.map(item => item.run_MONTH))].sort();
    let datasets = [];

    rawData.forEach(item => {
      let dataset = datasets.find(ds => ds.label === item.bonus_TY_NM);

      if (!dataset) {
        dataset = {
          label: item.bonus_TY_NM,
          data: new Array(labels.length).fill(0),
          backgroundColor: '#' + Math.floor(Math.random()*16777215).toString(16),
        };
        datasets.push(dataset);
      }

      let index = labels.indexOf(item.run_MONTH);
      dataset.data[index] = Number(item.bonus_AMT) + Number(item.appl_PREM_AMT || 0);
    });

    return { labels, datasets };
  };

  const chartData = preprocessData(data);

  return (
    <Bar
      ref={chartRef}
      data={chartData}
      options={{
        responsive: true,
        scales: {
          x: { beginAtZero: true, stacked: true },
          y: { beginAtZero: true, stacked: true },
        },
      }}
    />
  );
}

export default StackedBarChart;