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";

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

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

  //Get chart data from props and parse it into chart values
  const chartData = Object.entries(data).map((val) => ({
    label: val[0],
    value: val[1],
  }));

  const chartConfigs = {
    type: "doughnut2d",        // 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,
        captionAlignment: "left",
        baseFont: "Inter",
        outCnvBaseFont: "Inter",
        valueFont: "Inter",
        captionFontSize: 18,
        captionFontBold: "1",
        showpercentvalues: "1",
        aligncaptionwithcanvas: "1",
        captionpadding: "0",
        decimals: "1",
        plottooltext: "<b>$label</b> : <b>$percentValue</b>",
        theme: "fusion",
      },
      // Chart Data
      data: chartData,
    },
  };
  return <ReactFC {...chartConfigs} />;
};

export default PieChart;
