import React from "react";
import { ResponsivePie } from "@nivo/pie";
import { useGetInvestmentPortfolio } from "../../../../apis/InvestmentPortfolio";
import { useMemo } from "react";

/**
 * Represents the Equity Structure section.
 * @module Chart/Equity
 * @returns {JSX.Element} The Equity component.
 */
function Equity() {
  /**
   * Hook for getting the investment portfolio.
   * @type {object}
   * @name useGetInvestmentPortfolio
   * @memberof module:Chart/Equity
   */
  const { data: portfolioData, isLoading } = useGetInvestmentPortfolio();
  /**
   * Filtered equity structure data.
   * @type {object[]}
   * @memberof module:Chart/Equity
   */
  const equity = useMemo(() => {
    let temp = portfolioData?.data?.data?.results || [];
    temp = temp.filter(
      (item) => item?.investment_portfolio_type === "EQUITY_STRUCTURE"
    );
    return temp;
  }, [portfolioData?.data]);
  /**
   * Get chart data for the Equity Structure.
   * @function getChartData
   * @param {object[]} data - The investment portfolio data.
   * @returns {object[]} The chart data.
   *
   */
  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(equity)}
        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]],
        }}
        sliceLabel={() => <>hello</>}
        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: "IPO",
            },
            id: "dots",
          },
          {
            match: {
              id: "c",
            },
            id: "dots",
          },
          {
            match: {
              id: "go",
            },
            id: "dots",
          },
          {
            match: {
              id: "python",
            },
            id: "dots",
          },
          {
            match: {
              id: "Promoters",
            },
            id: "lines",
          },
          {
            match: {
              id: "lisp",
            },
            id: "lines",
          },
          {
            match: {
              id: "elixir",
            },
            id: "lines",
          },
          {
            match: {
              id: "javascript",
            },
            id: "lines",
          },
        ]}
        legends={[
          {
            anchor: "bottom",
            direction: "row",
            justify: false,
            translateX: 0,
            translateY: 56,
            itemsSpacing: 0,
            itemWidth: 100,
            itemHeight: 18,
            itemTextColor: "#999",
            itemDirection: "left-to-right",
            itemOpacity: 1,
            symbolSize: 18,
            symbolShape: "circle",
            effects: [
              {
                on: "hover",
                style: {
                  itemTextColor: "#000",
                },
              },
            ],
          },
        ]}
      />
    </>
  );
}

export default Equity;