import GraphBase from "../../../Common/GraphBase";
import ReactECharts from "echarts-for-react";
// import getOptions from "../../../../hooks/getChartOption";
import { useSelector } from "react-redux";
import { useState } from "react";
import * as echarts from "echarts";
import { lunarYear } from "../../../../utils/energeChartOption";

function Gas(props) {
  const elecTrend = useSelector((state) => state.energy.trend.natGas2);
  const [period, setPeriod] = useState("周");

  const options = getOptions(
    { 周: "week", 月: "month", 年: "year" }[period],
    elecTrend ?? { week: [], month: [], year: [] }
  );

  function handleSwitch(v) {
    // console.log('switched ', v);
  }

  function handleDateChange(v) {
    // console.log('date ', v);
    setPeriod(v);
  }

  return (
    <GraphBase
      icon="battery"
      title="天然气II"
      desc="能耗趋势图"
      switchOptions={false}
      onSwitch={handleSwitch}
      defaultSelect={period}
      dateOptions={["周", "月", "年"]}
      //   legend={["总量"]}
      onDateChange={handleDateChange}
      size={["long", "middle"]}
    >
      {/* real echarts here */}
      {options && (
        <ReactECharts
          key={Math.random()}
          option={options}
          // option={getOptions([[21, 4, 74, 72, 9, 59, 63]], "氧气")}
          style={{ height: "100%" }}
        />
      )}
      {!options && (
        <p
          style={{
            color: "#cccf",
            fontSize: "24px",
            userSelect: "none",
            textAlign: "center",
            paddingTop: "88px",
          }}
        >
          暂无数据
        </p>
      )}
      {/* real table data here  */}
    </GraphBase>
  );
}

export default Gas;

function getOptions(period, trend) {
  if (trend[period].length === 0) return null;
  // export default function getOptions(seriesData, name) {
  const today = new Date();
  const currentYear = today.getFullYear();
  const currentMonth = today.getMonth() + 1;
  let days = 30;
  if (period == "month") {
    if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) {
      days = 31;
    } else if (currentMonth == 2) {
      days = lunarYear(currentYear) ? 29 : 28;
    }
  }

  const colors = [
    "#FFD160",
    "#12FFF5",
    "#2760FF",
    "#E80091",
    "#8064ff",
    "#ff8a3b",
    "#8cd26d",
    "#2aa1ff",
  ];
  return {
    color: colors,
    grid: { top: 40, right: 12, bottom: 20, left: 80 },
    legend: {
      show: false,
      icon: "roundRect",
      top: 10,
      right: 10,
      padding: 0,
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 3,
      height: 8,
      textStyle: {
        color: "#DFF1FE",
        fontSize: 12,
      },
    },
    xAxis: {
      type: "category",
      data: Array(period == "week" ? 7 : period == "year" ? 12 : days)
        .fill(1)
        .map((_, index) => {
          if (period == "week") {
            const dtimestamp = today - (index + 1) * 24 * 60 * 60 * 1000;
            return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
              dtimestamp
            ).getDate()}`;
          } else if (period == "month") {
            return `${currentMonth}.${days - index}`;
          } else {
            return `${currentYear}.${12 - index}`;
          }
        })
        .reverse(),
      axisLabel: {
        color: "#fff",
        fontSize: 14,
      },
      axisTick: { show: false },
      axisLine: {
        lineStyle: {
          width: 1,
          color: "#213259",
        },
      },
    },
    yAxis: {
      name: "单位/Nm³",
      nameTextStyle: {
        color: "#fff",
        fontSize: 16,
        align: "right",
      },
      type: "value",
      axisLabel: {
        color: "#fff",
        fontSize: 14,
        formatter: "{value}",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#213259",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#213259a0",
        },
      },
    },
    series: {
      data: trend[period].map(item => item != null ? (+item).toFixed(2) : null),
      type: "line",
      symbol: "circle",
      symbolSize: 6,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: colors[0] + "40" },
          { offset: 0.5, color: colors[0] + "20" },
          { offset: 1, color: colors[0] + "00" },
        ]),
      },
    },
    // series: seriesData.map((arr, index) => ({
    // 	name: index + 1 + '#' + name,
    // 	data: arr,
    // 	type: 'line',
    // 	areaStyle: {
    // 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    // 			{ offset: 0, color: colors[index] + '40' },
    // 			{ offset: 0.5, color: colors[index] + '20' },
    // 			{ offset: 1, color: colors[index] + '00' },
    // 		]),
    // 	},
    // })),
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      className: "xc-chart-tooltip",
      // backgroundColor: ''
    },
  };
}