import * as echarts from 'echarts';
import { useEffect, useMemo, useRef } from 'react';
import styles from './index.less';
import './tooltip.css';

const colors = [
  '#0D5EF8',
  '#6AC21D',
  '#F98E1B',
  '#ECB934',
  '#8A34EC',
  '#FF1493',
  '#FFFF00',
  '#DAA520',
  '#CD853F',
  '#FF6347',
  '#808080',
  '#00BFFF',
  '#008000',
  '#00FFFF',
  '#FFFACD',
  '#FFA500',
  '#FF4500',
  '#800080',
  '#FF1493',
  '#000080',
];

const backgroundColor = new echarts.graphic.LinearGradient(
  0,
  0,
  0,
  1,
  [
    { offset: 0, color: '#ffffff' },
    { offset: 1, color: '#fdfeff' },
  ],
  false,
);

function getTooltip(xTitle: string, xValue: number, yTitle: string, yValue: number) {
  const str = `<div class="metrics-tooltip">
      <span class="y-text">Y:</span>
      <span class="x-text">X:</span>
      <div class="title">${yTitle}</div>
      <div class="value">${yValue}</div>
      <div class="title" style="margin-top: 10px">${xTitle}</div>
      <div class="value">${xValue}</div>
    <div>`;
  return str;
}

export type MetricsChatData = {
  name: string;
  values: number[];
  version: string;
  iters: number[];
};

export type MetricsChartProps = {
  name: string;
  chartData: MetricsChatData[];
};

function MetricsChart({ name, chartData }: MetricsChartProps) {
  const chartRef = useRef<HTMLDivElement>(null);
  const xAxisData = chartData[0]?.iters;
  const seriesData = useMemo(
    () =>
      chartData.map((item) => {
        return {
          name: item.version,
          type: 'line' as const,
          smooth: true,
          data: item.values,
        };
      }),
    [chartData],
  );

  const options: echarts.EChartsOption = useMemo(
    () => ({
      backgroundColor: backgroundColor,
      title: {
        show: false,
      },
      tooltip: {
        trigger: 'item',
        padding: 10,
        formatter: (params: any) => {
          const { name: xTitle, data } = params;
          return getTooltip('step', xTitle, name, data);
        },
      },
      legend: {
        bottom: 10,
        icon: 'rect',
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 20,
        textStyle: {
          color: 'rgba(29, 29, 32, 0.75)',
          fontSize: 12,
        },
      },
      color: colors,
      grid: {
        left: '15',
        right: '15',
        top: '20',
        bottom: '60',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: true,
        offset: 10,
        data: xAxisData,
        axisLabel: {
          color: 'rgba(29, 29, 32, 0.75)',
          fontSize: 12,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: '#eaeaea',
            width: 1,
          },
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: 'rgba(29, 29, 32, 0.75)',
          fontSize: 12,
          margin: 15,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: '#e4e4e4',
            width: 1,
            type: 'dashed',
          },
        },
      },
      series: seriesData,
    }),
    [name, seriesData, xAxisData],
  );

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

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

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

  return (
    <div className={styles['metrics-chart']}>
      <div className={styles['metrics-chart__title']}>
        <img src={require('@/assets/img/metrics-title-icon.png')}></img>
        <span>{name}</span>
      </div>
      <div className={styles['metrics-chart__chart']} ref={chartRef}></div>
    </div>
  );
}

export default MetricsChart;
