import * as echarts from "echarts";

export const initEcharts1 = (mainRef, chartInstance, data) => {
  const colors = [
    "29,128,219",
    "1,245,255",
    "228,187,45",
    "45,118,228",
    "188,45,228",
    "228,72,45",
    "58,45,228",
    "221,44,67",
  ];

  const date = data.date;
  const name = data.name;
  const series = [];

  for (let i = 0; i < date.length; i++) {
    series.push({
      name: name[i],
      type: "line",
      symbol: "circle",
      showAllSymbol: true,
      symbolSize: 0,
      smooth: true,
      lineStyle: {
        width: 2,
        color: `rgba(${colors[i]},1)`,
      },
      itemStyle: {
        color: `rgba(${colors[i]},1)`,
      },
      tooltip: {
        show: true,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: `rgba(${colors[i]},0.3)`,
            },
            {
              offset: 1,
              color: `rgba(${colors[i]},0)`,
            },
          ],
          false,
        ),
        shadowColor: "rgba(25,163,223, 0.5)",
        shadowBlur: 20,
      },
      data: date[i],
    });
  }

  chartInstance.current = echarts.init(mainRef.current);

  const option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      top: "0",
      align: "left",
      type: "plain",
      data: name,
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
      itemWidth: 18,
    },
    grid: {
      top: "20%",
      left: "10%",
      right: "5%",
      bottom: "15%",
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#15578b",
          },
        },
        axisLabel: {
          color: "#fff",
          fontSize: 12,
          formatter(data) {
            return data.substring(5);
          },
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#fff",
          },
        },
        axisTick: {
          show: false,
        },
        data: data.clickDate,
      },
    ],
    yAxis: [
      {
        min: 0,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(221,221,221,0.1)",
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#fff",
          },
        },
        axisLabel: {
          show: true,
          color: "#fff",
          padding: 10,
        },
      },
    ],
    series,
  };

  chartInstance.current.setOption(option);
};
