import {
  ArcGauge,
  CircularGauge,
  CircularGaugeProps,
} from "@progress/kendo-react-gauges";
import React, { useEffect } from "react";
import { ComprehensiveProps } from "../../DomainProps";

interface ColorRange {
  color?: string; //The color of the range. Accepts valid CSS color strings, including hex and rgb.
  from?: number; //The range start value.
  opacity?: number; //The opacity of the range.
  to?: number; //The range end value.
}

export interface GaugeProps extends ComprehensiveProps {
  role?: "circular" | "arc";
  //bgColor?: string;
  symbol?: string | null;
  colors?: ColorRange[];
}

const centerCircularRenderer = ({ value, color, symbol }: any) => {
  return (
    <h3 style={{ color: color }}>
      {value} {symbol}
    </h3>
  );
};

export default function GaugeWidget({
  widgetStyle,
  role,
  value,
  //bgColor,
  symbol,
  colors,
}: GaugeProps) {
  const [valueTest, setValue] = React.useState(value);

  useEffect(() => {
    setValue(value);
  }, [value]);

  const options: CircularGaugeProps = {
    value: valueTest,
    colors: colors,
    //color: bgColor,
  };

  return role === "circular" ? (
    <CircularGauge
      className={widgetStyle?.className || ""}
      scale={{ rangeSize: 6 }}
      {...options}
      centerRender={(value, color) =>
        centerCircularRenderer({ value, color, symbol })
      }
    />
  ) : (
    <ArcGauge
      {...options}
      arcCenterRender={(value, color) =>
        centerCircularRenderer({ value, color, symbol })
      }
    />
  );
}
