import ReactEcharts from 'echarts-for-react';
import { useLayoutEffect, useMemo, useRef } from 'react';

const LineCharts = ({ dataSource }: { dataSource: any[] }) => {
  const echartRef = useRef<any>(null);
  useLayoutEffect(() => {
    if (echartRef.current) {
      echartRef.current.resize();
    }
  }, [echartRef.current]);
  const option = useMemo(() => {
    const dates = dataSource?.map((item) => item.times) || [];
    const values = dataSource?.map((item) => item.num) || [];

    const sampledDates = (() => {
      const numSamples = 5;
      const limitedDates = dates;
      const total = limitedDates.length;
      if (total <= numSamples) {
        return limitedDates.map((date) => date.substring(5));
      }
      const step = (total - 1) / (numSamples - 1);
      const ret = Array.from({ length: numSamples }, (_, i) =>
        limitedDates[Math.round(i * step)].substring(5),
      );
      return ret;
    })();

    return {
      color: ['#FFBC27'],
      tooltip: {
        trigger: 'axis',
        borderWidth: '0',
        backgroundColor: 'rgba(73,81,92,.95)',
        textStyle: {
          color: '#fff',
          fontSize: 16,
        },
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
          },
        },
        formatter: function(params: any) {
          return `${params[0].name}<br/>${params[0].seriesName}：${params[0].value}件`;
        }
      },
      grid: {
        left: '3%',
        right: '3.3%',
        bottom: '4%',
        top: '1%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            interval: function(index: number, value: string) {
              return sampledDates.includes(value);
            },
            textStyle: {
              padding: [2, 0, 0, 0],
              color: '#CBEDFF',
              fontSize: 14,
            },
            formatter: (value: string, index: number, values: string[]) => {
              if (index === values?.length - 1) {
                return `{a|${value}}`;
              }
              return value;
            },
            rich: {
              a: {
                padding: [0, 0, 0, -20],
              },
            },
          },
          axisTick: {
            show: false,
          },
          data: dates.map(date => date.substring(5)),
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '件',
          min: 0,
          max: 'dataMax',
          interval: 50,
          axisLabel: {
            show: false,
            textStyle: {
              color: '#CBEDFF',
              fontSize: 16,
            },
            formatter: '{value}件'
          },
          nameTextStyle: {
            align: 'left',
            color: '#CBEDFF',
            padding: [0, 0, 20, -20],
            fontSize: 16,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: '投诉量',
          type: 'line',
          smooth: true,
          showSymbol: false,
          lineStyle: {
            width: 3,
          },
          areaStyle: {
            opacity: 0.36,
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#FFBC27FF',
                },
                {
                  offset: 1,
                  color: '#FFBC2700',
                },
              ],
            },
          },
          // areaStyle: {
          //   opacity: 0.36,
          //   color: {
          //     type: 'linear',
          //     x: 0,
          //     y: 0,
          //     x2: 0,
          //     y2: 1,
          //     colorStops: [
          //       {
          //         offset: 0,
          //         color: '#3CE88F',
          //       },
          //       {
          //         offset: 1,
          //         color: 'rgba(60,232,143,0)',
          //       },
          //     ],
          //   },
          // },
          data: values,
        },
      ],
    };
  }, [dataSource]);

  return (
    <ReactEcharts option={option} style={{ width: '100%', height: '100%' }} ref={echartRef} />
  );
};

export default LineCharts;
