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 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;