import themes from '@/styles/theme.less';
import * as echarts from 'echarts';
import React, { useEffect, useMemo, useRef } from 'react';
import styles from './index.less';

const color1 = new echarts.graphic.LinearGradient(
  0,
  0,
  0,
  1,
  [
    { offset: 0, color: '#c73131' },
    { offset: 1, color: '#ff7e96' },
  ],
  false,
);

const color2 = new echarts.graphic.LinearGradient(
  0,
  0,
  0,
  1,
  [
    { offset: 0, color: '#6ac21d' },
    { offset: 1, color: '#96e850' },
  ],
  false,
);
const color3 = new echarts.graphic.LinearGradient(
  0,
  0,
  0,
  1,
  [
    { offset: 0, color: '#8c8c8c' },
    { offset: 1, color: '#c8c6c6' },
  ],
  false,
);
const color4 = new echarts.graphic.LinearGradient(
  0,
  0,
  0,
  1,
  [
    { offset: 0, color: '#ecb934' },
    { offset: 1, color: '#f0864d' },
  ],
  false,
);

const color5 = new echarts.graphic.LinearGradient(
  0,
  0,
  0,
  1,
  [
    { offset: 0, color: '#7ea9fe' },
    { offset: 1, color: '#1664ff' },
  ],
  false,
);

const color6 = new echarts.graphic.LinearGradient(
  0,
  0,
  0,
  1,
  [
    { offset: 0, color: 'rgba(255, 255, 255, 0.62)' },
    { offset: 1, color: '#ebf2ff ' },
  ],
  false,
);

export type ExperimentStatistics = {
  Failed: number;
  Pending: number;
  Running: number;
  Succeeded: number;
  Terminated: number;
};

type ExperimentChartProps = {
  style?: React.CSSProperties;
  chartData: ExperimentStatistics;
};

function ExperimentChart({ chartData, style }: ExperimentChartProps) {
  const chartRef = useRef<HTMLDivElement>(null);
  const total =
    chartData.Failed +
    chartData.Pending +
    chartData.Running +
    chartData.Succeeded +
    chartData.Terminated;

  const options: echarts.EChartsOption = useMemo(
    () => ({
      title: {
        show: true,
        left: '29%',
        top: 'center',
        textAlign: 'center',
        text: [`{a|${total}}`, '{b|实验状态}'].join('\n'),
        textStyle: {
          rich: {
            a: {
              color: themes['textColor'],
              fontSize: 20,
              fontWeight: 700,
              lineHeight: 28,
            },
            b: {
              color: themes['textColorSecondary'],
              fontSize: 10,
              fontWeight: 'normal',
            },
          },
        },
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        top: 'center',
        right: '5%',
        orient: 'vertical',
        icon: 'circle',
        itemWidth: 6,
        itemGap: 20,
        height: 100,
      },
      color: [color1, color2, color3, color4, color5],
      series: [
        {
          type: 'pie',
          radius: ['70%', '80%'],
          center: ['30%', '50%'],
          avoidLabelOverlap: false,
          padAngle: 3,
          itemStyle: {
            borderRadius: 3,
          },
          minAngle: 5,
          label: {
            show: false,
          },
          emphasis: {
            label: {
              show: false,
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: chartData.Failed > 0 ? chartData.Failed : undefined, name: '失败' },
            { value: chartData.Succeeded > 0 ? chartData.Succeeded : undefined, name: '成功' },
            { value: chartData.Terminated > 0 ? chartData.Terminated : undefined, name: '中止' },
            { value: chartData.Pending > 0 ? chartData.Pending : undefined, name: '等待' },
            { value: chartData.Running > 0 ? chartData.Running : undefined, name: '运行中' },
          ],
        },
        {
          type: 'pie',
          radius: '60%',
          center: ['30%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
          },
          tooltip: {
            show: false,
          },
          emphasis: {
            label: {
              show: false,
            },
            disabled: true,
          },
          animation: false,
          labelLine: {
            show: false,
          },
          data: [
            {
              value: 100,
              itemStyle: { color: color6, borderColor: 'rgba(22, 100, 255, 0.08)', borderWidth: 1 },
            },
          ],
        },
      ],
    }),
    [chartData, total],
  );

  useEffect(() => {
    // 创建一个echarts实例，返回echarts实例
    const chart = echarts.init(chartRef.current);

    // 设置图表实例的配置项和数据
    chart.setOption(options);

    // 组件卸载
    return () => {
      // myChart.dispose() 销毁实例
      chart.dispose();
    };
  }, [options]);

  return (
    <div className={styles['experiment-chart']} style={style}>
      <div style={{ width: '100%', height: '100%' }} ref={chartRef}></div>
    </div>
  );
}

export default ExperimentChart;
