import cls from "./kiln.module.scss";
import Container from "../../Container";
import { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { stateNameMap } from "../../../store/features/kilnSlice";

export default function Kiln() {
  const kilnInfo = useSelector((state) => state.kiln);
  // const dispatch = useDispatch();

  const infos = Object.keys(kilnInfo).map((key) => ({
    label: stateNameMap[key],
    value: kilnInfo[key],
  }));

  // useEffect(() => {
  //   setInterval(() => {
  //     dispatch({
  //       type: "kiln/setKilnInfo",
  //       payload: {
  //         kilnPressure: Math.ceil(Math.random() * 100) + "Pa",
  //         waterTemp: Math.ceil(Math.random() * 100) + "℃",
  //         waterFlow: Math.ceil(Math.random() * 100) + "m³/h",
  //         waterPressure: Math.ceil(Math.random() * 100) + "Pa",
  //         combustionAirPressure: Math.ceil(Math.random() * 100) + "Pa",
  //         topTemp: Math.ceil(Math.random() * 100) + "℃",
  //         compressedAirPressure: Math.ceil(Math.random() * 100) + "Pa",
  //         meltTemp: Math.ceil(Math.random() * 100) + "℃",
  //       },
  //     });
  //   }, 30000);
  // }, [dispatch]);

  // const infos = [
  //   { label: "窑炉压力", value: ctx?.runState?.kilnPressure || "0Pa" },
  //   { label: "循环水温度", value: ctx?.runState?.waterTemp || "0℃" },
  //   { label: "循环水流量", value: ctx?.runState?.waterFlow || "0㎡/h" },
  //   { label: "循环水压力", value: ctx?.runState?.waterPressure || "0Pa" },
  //   {
  //     label: "助燃风压力",
  //     value: ctx?.runState?.combustionAirPressure || "0℃",
  //   },
  //   { label: "碹顶加权温度", value: ctx?.runState?.topTemp || "0℃" },
  //   {
  //     label: "压缩气压力",
  //     value: ctx?.runState?.compressedAirPressure || "0Pa",
  //   },
  //   { label: "融化加权温度", value: ctx?.runState?.meltTemp || "0℃" },
  // ];

  return (
    <Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
      <div className={cls.leftBar__top__content}>
        {infos.map((item) => (
          <div key={item.label} className={cls.info__item}>
            {item.label}: {item.value}
          </div>
        ))}
      </div>
    </Container>
  );
}