/** @format */

import 'echarts/lib/chart/radar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/grid';

import echarts from 'echarts/lib/echarts';
import _ from 'lodash';
import React, {
  Fragment,
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
} from 'react';

import { globalTheme, ThemeData } from '../../../utils/theme';

interface RadarChartProps {
  size?: Record<string, any>;
  theme?: ThemeData;
  [key: string]: any;
}

const RadarChart = (props: RadarChartProps) => {
  const {
    size = { height: 300 },
    textStyle = { color: '#fff', fontSize: 12 },
    color = '#2DB9FF',
    shape = 'polygon',
    opacity,
    theme,
    data = [],
  } = props;

  const wrapperRef = useRef(null);
  const [echartsInc, setEchartsInc] = useState<Record<string, any> | null>(
    null,
  );

  const dataException = !data.length || data.length < 1;
  const colorList = theme ? theme : globalTheme;

  const optionBase = {
    color: color,
    tooltip: {
      padding: [0, 6, 20, 6],
    },
    radar: {
      name: {
        textStyle: {
          color: '#fff',
          ...textStyle,
        },
      },
      shape,
      indicator: data,
      splitArea: {
        show: false,
      },
    },
    series: [
      {
        name: '',
        type: 'radar',
        areaStyle: {
          opacity,
        },
        lineStyle: {},

        symbol: 'none',
        data: [
          {
            value:
              !dataException &&
              data.map((item: Record<string, any>) => item.value),
          },
        ],
      },
    ],
  };
  useLayoutEffect(() => {
    if (wrapperRef && wrapperRef.current) {
      const myChart = echarts.init(wrapperRef.current, null, {
        devicePixelRatio: 2,
      });
      setEchartsInc(myChart);

      if (dataException) return;

      myChart.setOption(optionBase);
    }
  }, []);

  useEffect(() => {
    if (!echartsInc) {
      return;
    }
    if (dataException) return;
    echartsInc.setOption(optionBase);
  }, [data, color, textStyle]);

  useEffect(() => {
    if (!echartsInc) {
      return;
    }
    echartsInc.resize();
  }, [size]);

  return (
    <Fragment>
      {dataException && <p>数据格式异常</p>}
      <div className="datav-wrapper" style={size} ref={wrapperRef}></div>
    </Fragment>
  );
};

RadarChart.themeUpdate = function(params: any) {
  return {
    color: params.primaryColor,
  };
};

export default RadarChart;