/** @format */

import 'echarts/lib/chart/pie';
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, { useEffect, useLayoutEffect, useRef, useState } from 'react';

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

const MiniRingChart = (props: MiniRingChartProps) => {
  const {
    size = { height: 300 },
    count,
    textStyle = {
      color: '#fff',
      fontSize: 18,
      fontFamily: 'DINAlternate-Bold',
    },
    color = '#0a73ff',
    data = [],
  } = props;

  function getCurrentText() {
    const dataSourceText =
      data && data.length ? data[0] && data[0].value : null;
    return typeof dataSourceText !== 'undefined' && dataSourceText !== null
      ? dataSourceText
      : count;
  }

  const [currentText, setCurrentText] = useState(getCurrentText());

  useEffect(() => {
    setCurrentText(getCurrentText());
  }, [count, data]);

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

  const optionBase = {
    color: [color, 'rgba(56, 68, 102,0.8)'],
    tooltip: {
      show: false,
    },
    legend: {
      show: false,
    },
    grid: {
      left: 0,
      right: 0,
      bottom: 0,
      top: 0,
      containLabel: true,
    },

    series: [
      {
        name: '',
        type: 'pie',
        radius: ['96%', '76%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'center',
          rich: {
            a: textStyle,
          },
          formatter: `{a|${`${currentText}%`}}`,
          fontFamily: 'Microsoft Yahei',
          fontWeight: 'normal',
          fontSize: 12,
          color: '#999',
        },

        data: [
          { value: currentText, name: '' },
          { value: 100 - currentText, name: '' },
        ],
      },
    ],
    animation: true,
    animationEasing: 'cubicOut',
    animationEasingUpdate: 'cubicOut',
    animationDuration: 500,
    animationDurationUpdate: 300,
  };
  useLayoutEffect(() => {
    if (wrapperRef && wrapperRef.current) {
      const myChart = echarts.init(wrapperRef.current, null, {
        devicePixelRatio: 2,
      });
      setEchartsInc(myChart);

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

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

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

  return <div className="datav-wrapper" style={size} ref={wrapperRef}></div>;
};

export default MiniRingChart;