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 dayjs from "dayjs";

function Oxygen(props) {
  const dayTrend = useSelector((state) => state.smoke?.dayTrend);
  const weekTrend = useSelector((state) => state.smoke?.weekTrend);
  const monthTrend = useSelector((state) => state.smoke?.monthTrend);
  const yearTrend = useSelector((state) => state.smoke?.yearTrend);
  const [period, setPeriod] = useState("日");
  const [timestr, setTimestr] = useState(
    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
      " - " +
      dayjs().subtract(1, "day").format("YYYY.MM.DD")
  );

  const currentTrend =
    period === "日"
      ? dayTrend
      : period === "周"
      ? weekTrend
      : period === "月"
      ? monthTrend
      : yearTrend;

  const options = getOptions("O2_float", period, currentTrend);

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

  function handleDateChange(value) {
    setPeriod(
      {
        日: "day",
        周: "week",
        月: "month",
        年: "year",
      }[value]
    );
    setTimestr(
      {
        日:
          dayjs().subtract(1, "day").format("YYYY.MM.DD") +
          " 7点 - " +
          dayjs().format("YYYY.MM.DD") +
          " 7点",
        年:
          dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
          "29 - " +
          dayjs().endOf("year").format("YYYY.MM.") +
          "28",
        周:
          dayjs().subtract(7, "day").format("YYYY.MM.DD") +
          " - " +
          dayjs().subtract(1, "day").format("YYYY.MM.DD"),
        月:
          dayjs().subtract(1, "month").format("YYYY.MM.") +
          "29 - " +
          dayjs().format("YYYY.MM.") +
          "28",
      }[value]
    );
  }
  return (
    <GraphBase
      icon="smoke"
      title="氧气含量"
      desc={`能耗趋势图  ${timestr}`}
      switchOptions={false}
      defaultSelect={period}
      onSwitch={handleSwitch}
      dateOptions={["日", "周", "月", "年"]}
      //   legend={["总量", "白班", "夜班"]}
      onDateChange={handleDateChange}
      size={["long", "middle"]}
    >
      {/* real echarts here */}
      {options && (
        <ReactECharts
          key={Math.random()}
          option={options}
          // option={getOptions(
          //   [
          //     [172, 165, 135, 35, 101, 53, 68], // 总量
          //     [87, 68, 81, 33, 35, 44, 38], // 白班
          //     [85, 97, 54, 2, 66, 9, 30], // 夜班
          //   ],
          //   "氧气"
          // )}
          style={{ height: "100%" }}
        />
      )}
      {!options && (
        <p
          style={{
            color: "#cccf",
            fontSize: "24px",
            userSelect: "none",
            textAlign: "center",
            paddingTop: "160px",
          }}
        >
          暂无数据
        </p>
      )}
      {/* real table data here  */}
    </GraphBase>
  );
}

export default Oxygen;

function getOptions(source, period, trend) {
  if (
    trend[source].length == 0 ||
    trend[source].filter((item) => item.value).length == 0
  )
    return null;
  return {
    color: ["#FFD160", "#12FFF5", "#2760FF"],
    grid: { top: 40, right: 12, bottom: 20, left: 80 },
    xAxis: {
      type: "category",
      //   data: Array(7)
      //     .fill(1)
      //     .map((_, index) => {
      //       const today = new Date();
      //       const dtimestamp = today - index * 24 * 60 * 60 * 1000;
      //       return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
      //         dtimestamp
      //       ).getDate()}`;
      //     })
      //     .reverse(),
      data: trend[source].map((item) => item.time),
      axisLabel: {
        color: "#fff",
        fontSize: 12,
      },
      axisTick: { show: false },
      axisLine: {
        lineStyle: {
          width: 1,
          color: "#213259",
        },
      },
    },
    yAxis: {
      name: "单位/%",
      nameTextStyle: {
        color: "#fff",
        fontSize: 16,
        align: "right",
      },
      type: "value",
      axisLabel: {
        color: "#fff",
        fontSize: 16,
        formatter: "{value} %",
      },
      min: 0,
      max: 100,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#213259",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#213259a0",
        },
      },
      //   interval: 10,
      //   min: 0,
      //   max: 100,
    },
    series: [
      {
        data: trend[source].map((item) =>
          !(item.value == null || isNaN(+item.value))
            ? (+item.value).toFixed(2)
            : null
        ),
        type: "line",
        symbol: "circle",
        symbolSize: 6,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#FFD16040" },
            { offset: 0.5, color: "#FFD16020" },
            { offset: 1, color: "#FFD16010" },
          ]),
        },
        // smooth: true,
      },
      //   {
      //     data: Array(7)
      //       .fill(1)
      //       .map((_) => {
      //         return randomInt(60, 100);
      //       }),
      //     type: "line",
      //     areaStyle: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //         { offset: 0, color: "#12FFF540" },
      //         { offset: 0.5, color: "#12FFF520" },
      //         { offset: 1, color: "#12FFF510" },
      //       ]),
      //     },
      //     // smooth: true,
      //   },
      //   {
      //     data: Array(7)
      //       .fill(1)
      //       .map((_) => {
      //         return randomInt(60, 100);
      //       }),
      //     type: "line",
      //     areaStyle: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //         { offset: 0, color: "#2760FF40" },
      //         { offset: 0.5, color: "#2760FF20" },
      //         { offset: 1, color: "#2760FF10" },
      //       ]),
      //     },
      //     // smooth: true,
      //   },
    ],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      className: "xc-chart-tooltip",
      // backgroundColor: ''
    },
  };
}