import React, { FC } from "react";
import FusionCharts from "fusioncharts";
import Widgets from "fusioncharts/fusioncharts.widgets";
import ReactFC from "react-fusioncharts";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
import GaugeDatasource from "../../types/gaugeDatasource"

ReactFC.fcRoot(FusionCharts, Widgets, FusionTheme);

/* PROP DATA EXAMPLE
const gaugeData = {
  value: 24
}
*/
export type GaugeProps = {
  data?: GaugeDatasource;
  type?: string;
  value: number;
  caption?: string;
};

const Gauge: FC<GaugeProps> = ({ data, caption, type, value }) => {
  let datasource = {};

  if (type === "IMC") {
    datasource = {
      chart: {
        caption,
        baseFont: "Inter",
        outCnvBaseFont: "Inter",
        valueFont: "Inter",
        lowerLimit: "10",
        upperLimit: "50",
        showValue: "1",
        numberSuffix: "",
        theme: "fusion",
        showToolTip: "0",
      },
      colorRange: {
        color: [
          {
            minValue: "0",
            maxValue: "18.5",
            code: "#00C5BE",
          },
          {
            minValue: "18.5",
            maxValue: "24.9",
            code: "#62B58F",
          },
          {
            minValue: "24.9",
            maxValue: "29.9",
            code: "#FFC533",
          },
          {
            minValue: "30",
            maxValue: "50",
            code: "#F2726F",
          },
        ],
      },
      dials: {
        dial: [
          {
            value,
          },
        ],
      },
    };
  } else {
    data ? (datasource = data) : (datasource = {});
  }

  const chartConfigs = {
    type: "angulargauge",
    width:"100% !important",
    height: "100% !important",
    dataFormat: "json",
    dataSource: datasource,
  };

  return <ReactFC {...chartConfigs} />;
};

export default Gauge;
