import { ResponsivePie } from "@nivo/pie";
import React from "react";
import { useGetInvestmentPortfolio } from "../../../../apis/InvestmentPortfolio";
import { useMemo } from "react";
/**
 * Represents the Private Group Investment Plan section.
 * @module Chart/Private
 * @returns {JSX.Element} The Private component.
 */
function Private() {
  /**
   * Hook for getting the investment portfolio.
   * @type {object}
   * @name useGetInvestmentPortfolio
   * @memberof module:Chart/Private
   */
  const { data: portfolioData, isLoading } = useGetInvestmentPortfolio();
  /**
   * Filtered private group investment plan data.
   * @type {object[]}
   * @memberof module:Chart/Private
   */
  const privates = useMemo(() => {
    let temp = portfolioData?.data?.data?.results || [];
    temp = temp.filter(
      (item) =>
        item?.investment_portfolio_type === "PRIVATES_GROUP_INVESTMENT_PLAN"
    );
    return temp;
  }, [portfolioData?.data]);

  /**
   * Get chart data for the Private Group Investment Plan.
   * @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(privates)}
        margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
        innerRadius={0.5}
        padAngle={0.7}
        cornerRadius={3}
        arcLabel={(d) => (
          <tspan style={{ fontSize: "18px" }}>{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: "Labour",
            },
            id: "dots",
          },
          {
            match: {
              id: "Geographic Sector",
            },
            id: "dots",
          },
          {
            match: {
              id: "Engineer",
            },
            id: "dots",
          },
          {
            match: {
              id: "scala",
            },
            id: "lines",
          },
          {
            match: {
              id: "lisp",
            },
            id: "lines",
          },
          {
            match: {
              id: "Nepal Police",
            },
            id: "lines",
          },
          {
            match: {
              id: "Corporate",
            },
            id: "lines",
          },
        ]}
        // legends={[
        //     {
        //         anchor: 'bottom',
        //         direction: 'row',
        //         justify: false,
        //         translateX: 0,
        //         translateY: 56,
        //         itemsSpacing: 0,
        //         itemWidth: 120,
        //         itemHeight: 18,
        //         itemTextColor: '#999',
        //         itemDirection: 'left-to-right',
        //         itemOpacity: 1,
        //         symbolSize: 18,
        //         symbolShape: 'circle',
        //         effects: [
        //             {
        //                 on: 'hover',
        //                 style: {
        //                     itemTextColor: '#000'
        //                 }
        //             }
        //         ]
        //     }
        // ]}
      />
    </>
  );
}

export default Private;