import { motion, AnimatePresence } from "framer-motion";
import { useRef, useEffect, useMemo, useState } from "react";
import FeederStatus from "../../../../Common/Feeder";
import TemperatureBottom from "../../../../Common/TemperatureBottom";
import TemperatureTop from "../../../../Common/TemperatureTop";
import { useSelector, useDispatch } from "react-redux";

function FloorTwoToOne(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;

  useEffect(() => {
    if (show) {
      vd.current.play();
      setTimeout(() => {
        // console.log("开启2-1的火播放");
        setFireCanPlay(true);
      }, 1800);
    }
    if (!show) setFireCanPlay(false);
    return () => {
      // console.log("关闭2-1的火播放");
      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.2, delay: 0.2 } }}
        >
          <video ref={vd} muted>
            <source src="/video/2to1.webm" type="video/mp4" />
          </video>

          {fireCanPlay && fireDir == "东火" && (
            // {fireCanPlay && (
            <video
              src="/video/fire_top.webm"
              muted
              autoPlay
              loop
              width={3800}
              style={{ position: "absolute", top: "10px", left: "0px" }}
            ></video>
          )}
          {fireCanPlay && fireDir == "西火" && (
            // {fireCanPlay && (
            <video
              src="/video/fire_down.webm"
              muted
              autoPlay
              loop
              width={3800}
              style={{ position: "absolute", top: "-12px", left: "-10px" }}
            ></video>
          )}

          <TemperatureTop
            style={{
              top: "200px",
              left: "652px",
              width: "2380px",
              zIndex: 0,
            }}
          />
          <FeederStatus style={{ left: "680px" }} />
        </motion.div>
      )}
    </AnimatePresence>
  );
}

export default FloorTwoToOne;
