/** @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 React, { useEffect, useLayoutEffect, useRef, useState } from 'react';

import { globalTheme, ThemeData } from '../../../utils/theme';
import { Container } from './styled';
interface RadarChartProps {
  size?: Record<string, any>;
  legend?: Record<string, any>;
  opacity?: Record<string, any>;
  theme?: ThemeData;
  [key: string]: any;
}

const RadarChart = (props: RadarChartProps) => {
  const {
    opacity = 0,
    shape = 'polygon',
    size = { height: 320, width: 372 },
    legend = [],
    theme,
    textStyle,
    data = [],
  } = props;
  const colorList = theme ? theme : globalTheme;
  // const textStyle = { fontSize: 12, color: colorList.textColor };
  const wrapperRef = useRef(null);
  const [echartsInc, setEchartsInc] = useState<Record<string, any> | null>(
    null,
  );

  const dataException = !data.length || data.length < 1;
  const hasLegend = legend && legend.length > 0;
  const optionBase = {
    color: [...colorList.colorList],
    tooltip: {
      padding: [0, 6, 20, 6],
    },

    radar: {
      name: {
        textStyle: {
          ...textStyle,
        },
      },
      indicator:
        data.length &&
        data.map((item: any) => {
          return {
            name: item.name,
            max: item.max,
            axisLabel: item.axisLabel,
          };
        }),
      splitArea: {
        show: false,
      },
      radius: [0, '70%'],
      shape: shape,
      axisLabel: {
        show: true,
        textStyle: { fontSize: 12, color: textStyle?.color },
      },
    },
    series: [
      {
        name: '',
        type: 'radar',
        areaStyle: {
          opacity: opacity,
          // color,
        },
        lineStyle: {},
        symbol: 'none',
        data:
          hasLegend && !dataException
            ? legend.map((item: string) => {
                return {
                  name: item,
                  value: [
                    ...data.map((detail: Record<string, any>) => {
                      return detail.value[item];
                    }),
                  ],
                };
              })
            : [],
      },
    ],
  };
  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, textStyle]);

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

  return (
    <Container style={{ height: `${size.height}px`, width: `${size.width}px` }}>
      {dataException && <p>数据格式异常</p>}
      <div className="datav-wrapper" style={size} ref={wrapperRef}></div>
      {hasLegend ? (
        <div className="custom-legend">
          {legend && legend.length
            ? legend.map((item: any, index: any) => {
                return (
                  <div key={index} className="legend-item">
                    <div className="legend-icon">
                      <div
                        className="item-line"
                        style={{ background: colorList.colorList[index] }}
                      ></div>
                    </div>
                    <span className="legend-text">{item}</span>
                  </div>
                );
              })
            : null}
        </div>
      ) : null}
    </Container>
  );
};

export default RadarChart;