import BlueRect from "../BlueRect";
import { useSelector } from "react-redux";
import { motion, AnimatePresence } from "framer-motion";
import { useEffect, useState } from "react";

const blueTe = ["TE401", "TE402", "TE403", "PE401", "PE402", "PE403"];

function TemperatureBottom(props) {
  const tempBottom = useSelector((state) => state.temperature.bottom);
  const speed = props.speed;
  const floor = props.floor;
  const [speedAn, setSpeedAn] = useState({});
  useEffect(() => {
    // 2，3互切不用展示动画
    if (speed === "f") {
      setSpeedAn({});
    } else {
      if (floor === 2) {
        setSpeedAn({
          opacity: [0, 0, 0, 0.6, 1],
          transition: { duration: 0.3, delay: 1.8 },
        });
      } else {
        setSpeedAn({});
      }
    }
  }, [floor]);

  return (
    <motion.div
      className="temperature-bottom"
      style={{
        position: "absolute",
        top: "0",
        left: "0",
        width: "100%",
        height: "80vh",
        zIndex: "-1",
        ...props.style,
      }}
      animate={speedAn}
    >
      {Object.keys(tempBottom).map((d) => (
        <BlueRect
          title={d}
          key={d + Math.random()}
          value={tempBottom[d]}
          blue={blueTe.includes(d)}
        />
      ))}
    </motion.div>
  );
}

export default TemperatureBottom;