import cls from "./leftbox.module.scss";
import React, { useState, useContext, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";

import icon1 from "../../../assets/CenterChart1icon1.svg";
import icon2 from "../../../assets/CenterChart1icon2.svg";
import icon3 from "../../../assets/CenterChart1icon3.svg";
import icon4 from "../../../assets/CenterChart1icon4.svg";
// import icon4 from "../../../assets/CenterChart2icon4.svg";

import useTimeCounter from "../../../hooks/useTimeCounter";

const FireInfo = () => {
  // const dispatch = useDispatch();
  const KilnInfo = useSelector((state) => state.kiln);
  // const time = KilnInfo.lastFireChangeTime || "0分0秒";
  // const minsec = useTimeCounter(time);
  // let [min, sec] = [0, 0];
  // if (minsec) {
  //   min = minsec[0];
  //   sec = minsec[1];
  // }
  // useEffect(() => {
  //   const restTime = ctx?.runState?.lastFireChangeTime;
  //   if (restTime == null) return;
  //   let timer = null;
  //   if (/分/.test(restTime) && /秒/.test(restTime)) {
  //     let [min, sec] = restTime.replace(/分/, ":").replace(/秒/, "").split(":");
  //     timer = setInterval(() => {
  //       if (Number(sec) === 0 && Number(min) === 0) {
  //         clearInterval(timer);
  //         return;
  //       }
  //       if (Number(sec) === 0) {
  //         sec = 59;
  //         min--;
  //       } else {
  //         sec--;
  //       }
  //       setTime([min, sec]);
  //     }, 1000);
  //   } else if (/分/.test(restTime)) {
  //     let sec,
  //       min = restTime.replace(/分/, ":");
  //     sec = 0;

  //     timer = setInterval(() => {
  //       if (Number(sec) === 0 && Number(min) === 0) {
  //         clearInterval(timer);
  //         return;
  //       }
  //       if (Number(sec) === 0) {
  //         sec = 59;
  //         min--;
  //       } else {
  //         sec--;
  //       }
  //       setTime([min, sec]);
  //     }, 1000);
  //   } else if (/秒/.test(restTime)) {
  //     let min,
  //       sec = restTime.replace(/秒/, "");
  //     min = 0;

  //     timer = setInterval(() => {
  //       if (Number(sec) === 0 && Number(min) === 0) {
  //         clearInterval(timer);
  //         return;
  //       }
  //       if (Number(sec) === 0) {
  //         sec = 59;
  //         min--;
  //       } else {
  //         sec--;
  //       }
  //       setTime([min, sec]);
  //     }, 1000);
  //   }
  //   return () => {
  //     clearInterval(timer);
  //   };
  // }, [ctx?.runState?.lastFireChangeTime]);

  // useEffect(() => {
  //   setInterval(() => {
  //     dispatch({
  //       type: "fireInfo/setFireInfo",
  //       payload: {
  //         fireChangeTime: `${Math.ceil(Math.random() * 10)}:${Math.ceil(
  //           Math.random() * 10
  //         )}`,
  //         fireDirection: Math.random * 10 < 5 ? "东火" : "西火",
  //         lastFireChangeTime: `${Math.ceil(Math.random() * 60)}分${Math.ceil(
  //           Math.random() * 50
  //         )}秒`,
  //       },
  //     });
  //   }, 10000);
  // }, []);

  const data = [
    {
      icon: icon1,
      label: "泡界线",
      // value: ctx?.runState?.fireChangeTime || "00:00",
      // value: KilnInfo.fireChangeTime || "00:00",
    },
    {
      icon: icon2,
      label: "磴顶加权温度",
      // value: `${time[0]}分${time[1]}秒`,
      value: KilnInfo.topTemp|| "℃",
    },
    {
      icon: icon3,
      label: "液位",
      // value: ctx?.runState?.fireDirection || "东火",
      value: KilnInfo.liquidLevel || "0",
    },
      {
      icon: icon4,
      label: "池底加权温度",
      // value: ctx?.runState?.fireDirection || "东火",
      value: KilnInfo.meltTemp || "℃",
    },
  ];

  return (
    <div className={`${cls.leftbox}`}>
      {data.map((item) => (
        <div className={cls.box} key={item.label}>
          <img src={item.icon} alt="Error" className="box__logo" />
          <div className={cls.box__inner}>
            <h2 className={cls.box__label}>{item.label}</h2>
            <h2 className={cls.box__value}> {item.value}</h2>
          </div>
        </div>
      ))}
    </div>
  );
};

export default FireInfo;