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

/**
 * Represents the Promoters Structure section.
 * @module Chart/Promoters
 * @returns {JSX.Element} The Promoters component.
 */
function Promoters() {
  /**
   * Hook for getting the investment portfolio.
   * @type {object}
   * @name useGetInvestmentPortfolio
   * @memberof module:Chart/Promoters
   */
  const { data: portfolioData, isLoading } = useGetInvestmentPortfolio();
  /**
   * Filtered promoters structure data.
   * @type {object[]}
   * @memberof module:Chart/Promoters
   */
  const promoters = useMemo(() => {
    let temp = portfolioData?.data?.data?.results || [];
    temp = temp.filter(
      (item) => item?.investment_portfolio_type === "PROMOTERS_STRUCTURE"
    );
    return temp;
  }, [portfolioData?.data]);

  /**
   * Get chart data for the Promoters 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(promoters)}
        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: "Private Group",
            },
            id: "dots",
          },
          {
            match: {
              id: "go",
            },
            id: "dots",
          },
          {
            match: {
              id: "python",
            },
            id: "dots",
          },
          {
            match: {
              id: "Corporate",
            },
            id: "lines",
          },
          {
            match: {
              id: "lisp",
            },
            id: "lines",
          },
          {
            match: {
              id: "IPO",
            },
            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 Promoters;