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

const MultiplePieChart = (props: MultiplePieChartProps) => {
  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: true,
      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: 'Access From',
        type: 'pie',
        selectedMode: 'single',
        radius: ['10%', '30%'],
        label: {
          position: 'inner',
          fontSize: 14,
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1548, name: 'Search Engine' },
          { value: 775, name: 'Direct' },
          { value: 679, name: 'Marketing' },
        ],
      },
      {
        name: 'Access From',
        type: 'pie',
        radius: ['45%', '60%'],
        labelLine: {
          length: 30,
        },
        label: {
          formatter: '{b|{b}：} \n{c} {per|{d}%}  ',
          // backgroundColor: '#F6F8FC',
          // borderColor: '#8C8D8E',
          // borderWidth: 1,
          // borderRadius: 4,
          rich: {
            b: {
              color: '#4C5058',
              fontSize: 14,
              fontWeight: 'bold',
              lineHeight: 33,
            },
            c: {
              color: '#4C5058',
            },
            per: {
              color: '#4C5058',
            },
          },
        },
        data: [
          { value: 1048, name: 'Baidu' },
          { value: 335, name: 'Direct' },
          { value: 310, name: 'Email' },
          { value: 251, name: 'Google' },
          { value: 234, name: 'Union Ads' },
          { value: 147, name: 'Bing' },
          { value: 135, name: 'Video Ads' },
          { value: 102, name: 'Others' },
        ],
      },
    ],
    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 MultiplePieChart;