/** @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';

import { Container } from './styled';

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

const SCPieChart = (props: SCPieChartProps) => {
  const { size, option = {} } = props;

  const wrapperRef = useRef(null);
  const [echartsInc, setEchartsInc] = useState<Record<string, any> | null>(
    null,
  );
  const [isLegendShow, setIsLegendShow] = useState(false);
  const [colorArray, setColorArray] = useState([]);
  const [seriesNameArray, setSeriesNameArray] = useState([]);

  function handleOption(latestOption: Record<string, any>) {
    // legend不以默认方式显示，自定义样式
    if (latestOption.legend && latestOption.legend.show) {
      latestOption.legend.show = false;
      setIsLegendShow(true);
    }

    setColorArray(latestOption.color);
    setSeriesNameArray(
      (latestOption.series &&
        latestOption.series[0] &&
        latestOption.series[0].data.map(
          (item: Record<string, any>) => item.name,
        )) ||
        [],
    );
  }

  useLayoutEffect(() => {
    if (wrapperRef && wrapperRef.current) {
      const myChart = echarts.init(wrapperRef.current, null, {
        devicePixelRatio: 2,
      });
      setEchartsInc(myChart);

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

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

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

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

  if (!props.size) {
    return null;
  }

  const { height } = props.size;

  const optionBase = {
    color: ['#B2AEA5', '#FDA568', '#50E1A8', '#fff'],
    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: 'auto',
      right: 0,
      orient: 'vertical',
      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: [
      {
        type: 'pie',
        radius: [height / 2 - 70, height / 2 - 60],
        center: [height / 2 - 60, '50%'],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        label: {
          show: false,
        },
        data: [
          { value: 335, name: '预约车辆' },
          { value: 310, name: '临时车辆' },
          { value: 234, name: '业主车辆' },
          { value: 234, name: '其他' },
        ],
      },
      {
        type: 'pie',
        radius: [height / 2 - 84, height / 2 - 70],
        center: [height / 2 - 60, '50%'],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        label: {
          show: true,
          backgroundColor: 'rgba(54, 58, 67, .3)',
          position: 'center',
          rich: {
            whiteSpace: {
              height: height / 2 - 140,
            },
            value: {
              fontSize: 26,
              fontFamily: 'DINAlternate-Bold, DINAlternate',
              fontWeight: 'bold',
              color: '#FFFFFF',
              lineHeight: 34,
            },
            label: {
              fontSize: 14,
              fontFamily: 'PingFangSC-Medium, PingFang SC',
              fontWeight: 500,
              color: '#FFFFFF',
              lineHeight: 28,
            },
            splitLine: {
              width: 60,
              height: 1,
              backgroundColor: 'rgba(255, 255, 255, .24)',
            },
          },
          formatter: [
            '{whiteSpace|}',
            '{value|1800}',
            '{splitLine|}',
            '{label|车辆数}',
          ].join('\n'),
          width: height - 210,
          height: height - 210,
          borderRadius: (height - 210) / 2,
        },
        data: [],
      },
    ],
    animation: true,
    animationEasing: 'cubicOut',
    animationEasingUpdate: 'cubicOut',
    animationDuration: 500,
    animationDurationUpdate: 300,
  };

  return (
    <Container>
      <div style={size} ref={wrapperRef}></div>
      {isLegendShow && seriesNameArray.length ? (
        <div className="custom-pie-legend">
          {seriesNameArray.map((legendName, index) => (
            <div key={index} className="legend-item">
              1
            </div>
          ))}
        </div>
      ) : null}
    </Container>
  );
};

export default SCPieChart;