"use client"
import * as echarts from "echarts";
import { useEffect, useRef } from "react";


interface Props{
  data: number,
  name: string,
  colors?: any[][]
  additionalClassName?: string;
  labelFormatter?: (value: any) => void;
}

export function Gauge(props: Props){
  const chartRef = useRef<any>(null);
  const renderOption = () => {
    return {
      series: [
        {
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          center: ['50%', '75%'],
          radius: '90%',
          min: 0,
          max: 1,
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              width: 6,
              color: props.colors ?? [
                [0.25, '#FF6E76'],
                [0.5, '#FDDD60'],
                [0.75, '#58D9F9'],
                [1, '#7CFFB2']
              ]
            }
          },
          pointer: {
            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: '12%',
            width: 10,
            offsetCenter: [0, '-60%'],
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            length: 6,
            lineStyle: {
              color: 'auto',
              width: 2
            }
          },
          splitLine: {
            length: 10,
            lineStyle: {
              color: 'auto',
              width: 5
            }
          },
          axisLabel: {
            color: '#464646',
            fontSize: 14,
            distance: -30,
            rotate: 'tangential',
            formatter: props.labelFormatter ?? function (value) {
              if (value === 0.875) {
                return 'Grade A';
              } else if (value === 0.625) {
                return 'Grade B';
              } else if (value === 0.375) {
                return 'Grade C';
              } else if (value === 0.125) {
                return 'Grade D';
              }
              return '';
            }
          },
          title: {
            offsetCenter: [0, '-10%'],
            fontSize: 14
          },
          detail: {
            fontSize: 30,
            offsetCenter: [0, '-35%'],
            valueAnimation: true,
            formatter: function (value) {
              return Math.round(value * 100) + '';
            },
            color: 'inherit'
          },
          data: [
            {
              value: props.data,
              name: props.name
            }
          ]
        }
      ]
    }
  }

  useEffect(() => {
    const chartInstance = echarts.init(chartRef.current);

    const option = renderOption();
    chartInstance.setOption(option);
    window.addEventListener("resize", () => {
      chartInstance.resize();
    });

    return () => {
      chartInstance.dispose();
    };
  }, [props]);

  return (
    <div
      ref={chartRef}
      style={{ height: "100%", width: "100%" }}
      className={props.additionalClassName}
    ></div>
  );
}