import { ResponsivePie } from "@nivo/pie";
import React, { useMemo } from "react";
import { useGetInvestmentPortfolio } from "../../../../apis/InvestmentPortfolio";
/**
 * Represents the Corporate Structure section.
 * @module Chart/Corporate
 * @returns {JSX.Element} The Corporate component.
 */
function Corporate() {
  /**
   * hook  for getting  the investment portfolio.
   * @type {object}
   * @name useGetInvestmentPortfolio
   * @memberof module:Chart/Corporate
   */
  const { data: portfolioData, isLoading } = useGetInvestmentPortfolio();
  /**
   * Filtered corporate structure data.
   * @type {object[]}
   * @memberof module:Chart/Corporate
   */
  const corporate = useMemo(() => {
    let temp = portfolioData?.data?.data?.results || [];
    temp = temp.filter(
      (item) => item?.investment_portfolio_type === "CORPORATE_STRUCTURE"
    );
    return temp;
  }, [portfolioData?.data]);

  /**
   * Get chart data for the Corporate Structure.
   * @function
   * @param {object[]} data - The investment portfolio data.
   * @returns {object[]} The chart data.
   * @memberof module:Chart/Corporate
   */
  const getChartData = (data = []) => {
    let temp = data.map((item, i) => ({
      id: item?.category,
      label: item?.category,
      value: parseInt(item?.percentage),
    }));
    return temp;
  };
  if (isLoading) {
    return;
  }
  return (
    <>
      <ResponsivePie
        data={getChartData(corporate)}
        margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
        innerRadius={0.5}
        padAngle={0.7}
        cornerRadius={3}
        arcLabel={(d) => (
          <tspan style={{ fontSize: "20px" }}>{d.value} %</tspan>
        )}
        activeOuterRadiusOffset={8}
        borderWidth={1}
        borderColor={{
          from: "color",
          modifiers: [["darker", 0.2]],
        }}
        arcLinkLabelsSkipAngle={10}
        arcLinkLabelsTextColor="#333333"
        arcLinkLabelsThickness={2}
        arcLinkLabelsColor={{ from: "color" }}
        arcLabelsSkipAngle={10}
        arcLabelsTextColor={{
          from: "color",
          modifiers: [["darker", 2]],
        }}
        defs={[
          {
            id: "dots",
            type: "patternDots",
            background: "inherit",
            color: "rgba(255, 255, 255, 0.3)",
            size: 4,
            padding: 1,
            stagger: true,
          },
          {
            id: "lines",
            type: "patternLines",
            background: "inherit",
            color: "rgba(255, 255, 255, 0.3)",
            rotation: -45,
            lineWidth: 6,
            spacing: 10,
          },
        ]}
        fill={[
          {
            match: {
              id: "ruby",
            },
            id: "dots",
          },
          {
            match: {
              id: "Core Founder",
            },
            id: "dots",
          },
          {
            match: {
              id: "go",
            },
            id: "dots",
          },
          {
            match: {
              id: "python",
            },
            id: "dots",
          },
          {
            match: {
              id: "Lawyer ",
            },
            id: "lines",
          },
          {
            match: {
              id: "NRNA & Corporate House",
            },
            id: "lines",
          },
          {
            match: {
              id: "elixir",
            },
            id: "lines",
          },
          {
            match: {
              id: "Transportation Sector",
            },
            id: "lines",
          },
        ]}
      />
    </>
  );
}

export default Corporate;