import ReactECharts from "echarts-for-react";
import cls from "classnames";
import { useSelector } from "react-redux";
import { useEffect, useState } from "react";

const years = [];

for (let year = 1980; year <= 2017; year++) {
  years.push(year);
}

// 高原夏季气温（异常值）
const plateauData = [
  -0.3532047, -0.3800191, -0.4393019, -0.4789361, -0.4674187, -0.4082659,
  -0.3299886, -0.2692249, -0.2362842, -0.2431858, -0.2888356, -0.3307647,
  -0.3263536, -0.2682413, -0.1973641, -0.1355748, -0.09169727, -0.05341399,
  0.00680301, 0.0840551, 0.1391686, 0.1402837, 0.09915907, 0.06798702,
  0.07436849, 0.1159735, 0.1679915, 0.2133843, 0.2477409, 0.2872947, 0.3583514,
  0.4338831, 0.4701767, 0.4778886, 0.4858712, 0.5201119, 0.5574191, 0.570379,
];

// 拉布拉多海夏季海温（异常值）
const laBrudata = [
  -0.5808361, -0.6286728, -0.731713, -0.8032401, -0.7824413, -0.687568,
  -0.5886319, -0.5527237, -0.6027562, -0.7280338, -0.8761956, -0.9766923,
  -0.9833426, -0.8901258, -0.7279955, -0.5212721, -0.2961609, -0.0860718,
  0.07991157, 0.166387, 0.1871717, 0.1972264, 0.2479431, 0.3619903, 0.5000346,
  0.6201853, 0.696692, 0.7417008, 0.7834306, 0.8539514, 0.935372, 0.9951949,
  0.9844907, 0.9088836, 0.7977505, 0.7049671, 0.644415, 0.6330437,
];

function ChartPanel() {
  const [isHighlight, setIsHighlight] = useState(false);
  const { showPanelHighlight } = useSelector((state) => state.data);

  useEffect(() => {
    if (showPanelHighlight) {
      setIsHighlight(true);

      setTimeout(() => {
        setIsHighlight(false);
      }, 3000);
    }
  }, [showPanelHighlight]);
  console.log("showPanelHighlight :>> ", showPanelHighlight);

  const option = {
    title: {
      // text: "Stacked Line",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["ERSST_lancozs", "JRA55_lancozs"],
      textStyle: { color: "#04fbfd", cursor: "point" },
    },
    animationDuration: years.length * 1000,
    animationEasing: "cubicInOut",
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    // toolbox: {
    //   feature: {
    //     // 下载
    //     saveAsImage: {},
    //   },
    // },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: years,
      axisLine: {
        onZero: false,
        symbol: ["none", "arrow"],
        symbolOffser: [0, 10],
        lineStyle: {
          color: "#04fbfd",
        },
      },
    },
    yAxis: {
      type: "value",
      min: -1.5,
      max: 2.0,
      interval: 0.5,
      splitNumber: 5,
      splitLine: { show: false },
      axisLine: {
        onZero: false,
        show: true,
        symbol: ["none", "arrow"],
        symbolOffset: [0, 10],
        lineStyle: {
          color: "#04fbfd",
        },
      },
      axisLabel: {
        show: true,
      },
      axisTick: { show: true },
      scale: true,
    },
    dataZoom: { type: "inside", start: 0, end: 100 },
    series: [
      {
        name: "ERSST_lancozs",
        type: "line",
        stack: "Total",
        data: laBrudata,
        smooth: true,
        color: "red",
        symbol: "none",
        itemStyle: {
          color: "red",
        },
      },
      {
        name: "JRA55_lancozs",
        type: "line",
        // stack: "Total",
        data: plateauData,
        smooth: false,
        color: "#00a1ff",
        symbol: "none",
        itemStyle: {
          color: "#00a1ff",
        },
        lineStyle: {
          type: "dashed",
          width: 2,
        },
      },
    ],
  };

  return (
    <div className={cls("chart-info-panel", { highlight: isHighlight })}>
      <ReactECharts
        option={option}
        lazyUpdate={true}
        style={{
          height: "100%",
          width: "100%",
        }}
      />
    </div>
  );
}

export default ChartPanel;
