import React, { FC } from "react";
import FusionCharts from "fusioncharts";
import charts from "fusioncharts/fusioncharts.charts";
import Widgets from "fusioncharts/fusioncharts.widgets";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
import ReactFusioncharts from "react-fusioncharts";
import ReactFC from "react-fusioncharts";
import { Row } from "react-bootstrap";

ReactFC.fcRoot(FusionCharts, Widgets, FusionTheme);
// Resolves charts dependancy
charts(FusionCharts);

export type BulletProps = {
  value: number;
  target: number;
  caption: string;
};

const Bullet: FC<BulletProps> = ({ value, target, caption }) => {
  const dataSourceGen = (value: number, target: number) => {
    const Colors = {
      red: "#F2726F",  // or FF0005
      green: "#62B58F",// or #80cf06
      blue: "#00C5BE", // or #7ad8d7
    };
    
    //Takes the value and the target and calculatesthe limit range
    const upperLimit = Math.ceil(
      target > value ? target * 1.2 : value + target * 0.2
    );
    const lowerLimit = Math.ceil(
      value < 800
        ? 0
        : target < value
        ? target - target * 0.2
        : value - target * 0.2
    );

    return {
      chart: {
        lowerLimit,
        upperLimit,
        showTickMarks: target,
        showTickValues: target,
        ticksBelowGraph: target,
        theme: "fusion",
        numbersuffix: "", //UNIT
        showValue: 0,
        chartLeftMargin: 0,
        chartRightMargin: 0,
      },
      colorRange: {
        color: [
          {
            minValue: lowerLimit,
            maxValue: target * 0.9,
            code: Colors.blue,
            alpha: "100",
          },
          {
            minValue: target * 0.9,
            maxValue: target * 1.1,
            code: Colors.green,
            alpha: "100",
          },
          {
            minValue: target * 1.1,
            maxValue: upperLimit,
            code: Colors.red,
            alpha: "100",
          },
        ],
      },
      value,
      target,
    };
  };

  const dataSource = dataSourceGen(value, target);

  return (
    <Row style={{ width: "100%" }}>
      <div
        style={{
          fontFamily: "Inter",
          fontSize: "18px",
          fontWeight: "bold",
          color: "#6A6A6A",
        }}
      >
        {caption}
      </div>
      <ReactFusioncharts
        type="hbullet"
        width="100%"
        height="75"
        dataFormat="JSON"
        dataSource={dataSource}
      />
    </Row>
  );
};

export default Bullet;
