import { useState, useEffect } from '@wordpress/element';
import { Button } from '@wordpress/components';

const DismissibleVideoTutorial = ({ moduleId, videoUrl }) => {
    const [isVisible, setIsVisible] = useState(true);

    // Check localStorage to determine if the video has been dismissed
    useEffect(() => {
        const dismissed = localStorage.getItem(`dismissed_${moduleId}`);
        setIsVisible(!dismissed); // Show the video if not dismissed
    }, [moduleId]);

    const handleClose = () => {
        setIsVisible(false);
        localStorage.setItem(`dismissed_${moduleId}`, true); // Dismiss the video
    };

    if (!isVisible) return null; // Do not render if not visible

    return (
        <div className="strb-offcanvas-option strb-video-guide">
            <iframe
                width="100%"
                height="315"
                src={videoUrl}
                title={`${moduleId} tutorial`}
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerPolicy="strict-origin-when-cross-origin"
                allowFullScreen
            ></iframe>
            <Button
                isDestructive
                variant='primary'
                onClick={handleClose}
                className='strb-video-close-btn'
                isSmall={true}
            >
                Close
            </Button>
        </div>
    );
};

export default DismissibleVideoTutorial;