import { motion, AnimatePresence } from "framer-motion";
import { useRef, useEffect, useMemo, useState } from "react";
import cls from "../index.module.css";
// import SocketContext from '../../../../../store/socket-data-provider';
import { useContext } from "react";

function FloorOneToTwo(props) {
  // const ctx = useContext(SocketContext);

  const ctx = null;

  const fireDir = ctx?.runState?.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("开启1-2的火播放");
        setFireCanPlay(true);
      }, 3000);
    }
    if (!show) setFireCanPlay(false);
    return () => {
      console.log("关闭1-2的火播放");
      setFireCanPlay(false);
    };
  }, [show]);

  return (
    <AnimatePresence>
      {show && (
        <motion.div
          className="video-wrapper"
          style={{
            position: "fixed",
            top: "7px",
            left: "50px",
            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>

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

          <motion.div
            className={cls.videoLayer2}
            key="1to2div"
            style={{
              top: "360px",
              left: "740px",
              width: "2415px",
              height: "690px",
            }}
            animate={{
              opacity: [0, 0, 0, 0.6, 1],
              transition: { duration: 0.3, delay: 2 },
            }}
          ></motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

export default FloorOneToTwo;