import { motion, AnimatePresence } from "framer-motion";
import { useRef, useEffect, useState } from "react";
import FeederStatus from "../../../../Common/Feeder";
import TemperatureBottom from "../../../../Common/TemperatureBottom";
import { useSelector } from "react-redux";
import BotttomColorBlock from "./../../components/BotttomColorBlock";
import image from "./../../../../../assets/kilnSpeed.png";

function FloorOneToTwo(props) {
  const fireInfo = useSelector((state) => state.fireInfo);
  const fireDir = fireInfo?.fireDirection || null;

  const [fireCanPlay, setFireCanPlay] = useState(false);

  const vd = useRef(null);
  const show = props.opacity || 0;
  // 是否显示溶液速度标签的内容
  // 池底温度和溶液速度写在一个页面上
  const showSpeed = props.floor == 3 ? true : false; //显示3
  const showBottom = props.floor == 2 ? true : false; //显示2
  const speed = props.preFloor == 2 || props.preFloor == 3 ? "f" : "s";
  const [speedAn, setSpeedAn] = useState({});
  useEffect(() => {
    // 2，3互切不用展示动画
    if (speed === "f") {
      setSpeedAn({
        opacity: [0, 0, 0, 0.6, 1],
        transition: { duration: 0.3, delay: 0 },
      });
    } else {
      if (props.floor === 3) {
        setSpeedAn({
          opacity: [0, 0, 0, 0.6, 1],
          transition: { duration: 0.3, delay: 1.5 },
        });
      } else {
        setSpeedAn({});
      }
    }
  }, [props.floor]);
  useEffect(() => {
    if (show) {
      vd.current.play();
      setTimeout(() => {
        // console.log("开启1-2的火播放");
        setFireCanPlay(true);
      }, 2000);
    }
    if (!show) setFireCanPlay(false);
    return () => {
      // console.log("关闭1-2的火播放");
      setFireCanPlay(false);
    };
  }, [show]);

  return (
    <AnimatePresence>
      {show && (
        <motion.div
          className="video-wrapper"
          style={{
            position: "fixed",
            top: "0px",
            left: "0px",
            width: "calc(100% - 50px)",
            height: "calc(100% - 7px)",
            zIndex: -998,
            overflow: "clip",
          }}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0, transition: { duration: 0, delay: 0.1 } }}
        >
          <video ref={vd} muted>
            <source src="/video/1to2.webm" type="video/mp4" />
          </video>
          {/* 窑炉的色块 */}
          {showBottom && (
            <BotttomColorBlock speed={speed} floor={props.floor} />
          )}

          {showBottom && fireCanPlay && fireDir == "东火" && (
            <video
              src="/video/fire_top.webm"
              muted
              autoPlay
              loop
              width={3700}
              style={{
                position: "absolute",
                top: "18px",
                left: "72px",
                zIndex: 9,
              }}
            ></video>
          )}
          {showBottom && fireCanPlay && fireDir == "西火" && (
            // {fireCanPlay && (
            <video
              src="/video/fire_down.webm"
              muted
              autoPlay
              loop
              width={3780}
              style={{
                position: "absolute",
                top: "-24px",
                left: "12px",
                zIndex: 9,
              }}
            ></video>
          )}

          {/* 温度组件 */}
          {showBottom && (
            <TemperatureBottom
              style={{
                top: "208px",
                // left: "638px",
                left: "690px",
                width: "2380px",
                zIndex: 10,
              }}
              speed={speed}
              floor={props.floor}
            />
          )}
          {/* 溶液速度色块 */}
          {showSpeed && (
            <motion.div
              style={{
                position: "absolute",
                top: "242px",
                left: "445px",
                zIndex: "999",
              }}
              animate={speedAn}
            >
              <img
                src={image}
                alt=""
                width="100%"
                height="100%"
                style={{ transform: "scale(0.583, 0.593)" }}
              />
            </motion.div>
          )}
          <FeederStatus />
        </motion.div>
      )}
    </AnimatePresence>
  );
}

export default FloorOneToTwo;