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

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

	useEffect(() => {
		vd.current.addEventListener('ended', props.onVideoEnd);
	}, []);

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

export default EnterVideo;