import React, { useMemo } from "react";
import { Bar, Chart } from "react-chartjs-2";
import {
  Chart as ChartJS,
  BarElement,
  CategoryScale,
  LinearScale,
  Tooltip,
  Legend,
} from "chart.js";
import "./BarChart.css";
import { useGetCompanyChartData } from "../../apis/Dashboard";

/**
 * Register chart elements and scales for Chart.js.
 */
ChartJS.register(BarElement, CategoryScale, LinearScale, Tooltip, Legend);

/**
 * Functional component for rendering a bar chart.
 *
 * @interface BarChart
 * @returns {JSX.Element} The rendered bar chart.
 */
const BarChart = () => {
  /**
   * Fetch chart data from the server using a custom hook.
   */
  const { data: chartData } = useGetCompanyChartData();
  /**
   * Memoized callback to extract chart data from the API response.
   *
   * @type {Object[]}
   */
  const getChartData = useMemo(() => {
    return chartData?.data?.data?.results || [];
  }, [chartData?.data]);

  /**
   * Prepare chart data in a proper format.
   *
   * @type {Object[]}
   */
  const result = getChartData.reduce(
    (acc, { share_company, share_type, total_available_kitta }) => {
      const existingCompany = acc.find(
        (item) => item.company === share_company
      );

      if (existingCompany) {
        if (share_type.toLowerCase() === "ordinary") {
          existingCompany.totalOrdinaryShares += total_available_kitta;
        } else if (share_type.toLowerCase() === "bonus") {
          existingCompany.totalBonusShares += total_available_kitta;
        }
      } else {
        const newCompany = {
          company: share_company,
          totalOrdinaryShares:
            share_type.toLowerCase() === "ordinary" ? total_available_kitta : 0,
          totalBonusShares:
            share_type.toLowerCase() === "bonus" ? total_available_kitta : 0,
        };
        acc.push(newCompany);
      }

      return acc;
    },
    []
  );
  /**
   * Extract company names for the labels.
   *
   * @type {string[]}
   */
  const companyList = result.map((item) => {
    return item.company;
  });
  /**
   * Extract total ordinary shares data.
   *
   * @type {number[]}
   */
  const OrdinaryShareList = result.map((item) => {
    return item.totalOrdinaryShares;
  });
  /**
   * Extract total bonus shares data.
   *
   * @type {number[]}
   */
  const BonusShareList = result.map((item) => {
    return item.totalBonusShares;
  });
  /**
   * Chart data configuration.
   *
   * @type {Object}
   */
  const data = {
    // labels: ['rkd', 'bandipur', 'psms'],
    labels: companyList,
    datasets: [
      {
        label: "Ordinary Share",
        // data: [3, 6, 9],
        data: OrdinaryShareList,
        backgroundColor: "#4B87B9",
        borderColor: "white",
        borderWidth: 0.5,
        borderRadius: 12,
      },
      {
        label: "Bonus Share",
        // data: [3, 3, 2],
        data: BonusShareList,
        backgroundColor: "#C06C84",
        borderColor: "white",
        borderWidth: 1,
        borderRadius: 12,
      },
    ],
  };
  const options = {};
  return (
    <div>
      <h2 className="main-title ">
        Company share <span>overview</span>{" "}
      </h2>
      <div className="barchartContainer">
        {result ? (
          <Bar data={data} options={options} className="barchart"></Bar>
        ) : null}
      </div>
    </div>
  );
};

export default BarChart;