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

	return (
		<AnimatePresence>
			{show && (
				<motion.div
					className="video-wrapper"
					style={{
						position: 'fixed',
						top: '7px',
						left: '50px',
						width: '100%',
						height: '100%',
						zIndex: -998,
					}}
					initial={{ opacity: 0 }}
					animate={{ opacity: 1 }}
					exit={{ opacity: 0, transition: { duration: 0.2, delay: 0.2 } }}
				>
					<video ref={vd} muted width={'100%'}>
						<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: '-26px' }}
						></video>
					)}
					{fireCanPlay && fireDir == '西火' && (
						// {fireCanPlay && (
						<video
							src="/video/fire_down.webm"
							muted
							autoPlay
							loop
							width={3800}
							style={{ position: 'absolute', top: '-12px', left: '-26px' }}
						></video>
					)}

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

export default FloorTwoToOne;
