import React, { FC } from "react";
import ReactFC from "react-fusioncharts";
import FusionCharts from "fusioncharts";
import Column2D from "fusioncharts/fusioncharts.charts";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
import { PieChartProps } from "./PieChart";

// export type PieChartProps = {
//   data: {
//     Fat: number,
//     HC: number,
//     Prot: number,
//   };
//   caption: string;
// };

const GroupChart: FC<PieChartProps> = ({ data, caption }) => {
  ReactFC.fcRoot(FusionCharts, Column2D, FusionTheme);  

  const chartConfigs = {
    type:"scrollcolumn2d",        // The chart type
    width: "100% !important",  // Width of the chart
    height: "100% !important", // Height of the chart
    dataFormat: "json",        // Data type
    dataSource: {
      // Chart Configuration
      chart: {
        caption,
        aligncaptionwithcanvas: "1",
        baseFont: "Inter",
        captionAlignment:"left",
        captionFontSize:"16px",
        captionPadding: 30,
        decimals: "1",
        theme: "fusion",
        numvisibleplot: "8",
        labeldisplay: "auto",
      },
      categories: [
        {
          category: [
            {
              label: "Grasa"
            },
            {
              label: "H. carbono"
            },
            {
              label: "Proteina"
            }      
          ]
        }
      ],
      dataset: [
        {
          seriesname: "Recomendada",
          data: [
            {
              value: "121"
            },
            {
              value: "70"
            },
            {
              value: "67"
            }
          ]
        },
        {
          seriesname: "Actual",
          data: [
            {
              value: data.Fat
            },
            {
              value: data.HC
            },
            {
              value: data.Prot
            }
          ],
        }
      ]
    },
  };
  return <ReactFC {...chartConfigs} />;
};

export default GroupChart;
