/** @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 BasicPieChartProps {
  size?: Record<string, any>;
  [key: string]: any;
}

const BasicPieChart = (props: BasicPieChartProps) => {
  const { size = { height: 500 }, option = {} } = props;

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

  const optionBase = {
    color: ['#0a73ff', '#3dabff', '#79daff'],
    tooltip: {
      show: true,
      trigger: 'axis',
      triggerOn: 'mousemove',

      hideDelay: 100,
      textStyle: {
        fontFamily: 'Microsoft Yahei',
        fontWeight: 'normal',
        fontSize: 14,
        color: '#fff',
      },
    },
    legend: {
      show: false,
      padding: 2,
      itemGap: 10,
      bottom: 0,
      textStyle: {
        fontFamily: 'Microsoft Yahei',
        fontWeight: 'normal',
        fontSize: 12,
        color: '#999',
      },
    },
    grid: {
      left: 30,
      right: 40,
      bottom: 30,
      top: 30,
      containLabel: true,
    },

    radiusAxis: {
      axisLine: {
        show: true,
      },
    },

    series: [
      {
        name: '访问来源',
        type: 'pie',
        // radius: ['60%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          formatter: ['{bStyle|{b}}', '{dStyle|{d}}'].join('\n'),
          fontFamily: 'Microsoft Yahei',
          fontWeight: 'normal',
          fontSize: 12,
          color: '#999',
          rich: {
            bStyle: {
              color: '#999',
              fontSize: 14,
              opacity: 0,
            },
            dStyle: {
              color: '#999',
              fontSize: 14,
            },
          },
        },

        labelLine: {
          show: true,
          length: 10,
          length2: 10,
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
        ],
      },
    ],
    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);

      const latestOption = _.mergeWith({}, optionBase, option);

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

  useEffect(() => {
    if (!echartsInc) {
      return;
    }

    const latestOption = _.mergeWith({}, optionBase, option);
    echartsInc.setOption(latestOption);
  }, [option]);

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

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

export default BasicPieChart;