import { motion, AnimatePresence } from 'framer-motion';
import { useRef, useEffect, useMemo } from 'react';

function EnterToFloorOne(props) {
	const vd = useRef(null);
	const show = props.opacity || 0;

	useEffect(() => {
		if (show) vd.current.play();
	}, [show]);

	// const show = useMemo(
	// 	() => ({
	// 		opacity: 1,
	// 		display: 'block',
	// 		duration: 0,
	// 	}),
	// 	[],
	// );
	// const hide = useMemo(
	// 	() => ({
	// 		opacity: 0,
	// 		transitionEnd: {
	// 			display: 'none',
	// 		},
	// 	}),
	// 	[],
	// );

	return (
		<AnimatePresence>
			{show && (
				<motion.div
					className="video-wrapper"
					style={{
						position: 'fixed',
						top: 0,
						left: 0,
						width: '100%',
						height: '100%',
						zIndex: -999,
					}}
					initial={{ opacity: 0 }}
					animate={{ opacity: 1 }}
					exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
				>
					<video ref={vd} muted width={'100%'}>
						<source src="/video/floor1.webm" type="video/mp4" />
					</video>
				</motion.div>
			)}
		</AnimatePresence>
	);
	+66;
}

export default EnterToFloorOne;