import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
 * Legacy `.ssgs-video-wrapper`: a thumbnail that becomes the YouTube embed on click.
 *
 * @param {Object} props
 * @param {string} props.title     Heading text.
 * @param {string} props.duration  Duration badge.
 * @param {string} props.videoId   YouTube video ID.
 * @param {string} props.thumbnail Thumbnail URL.
 */
const VideoPlayer = ( { title, duration, videoId, thumbnail } ) => {
	const [ playing, setPlaying ] = useState( false );

	return (
		<div className="ssgs-video-wrapper">
			<h4 className="title">
				{ title } <span className="ssgs-badge gray">{ duration }</span>
			</h4>

			{ playing ? (
				<div className="sgss-video">
					<iframe
						width="100%"
						height="315"
						src={ `https://www.youtube.com/embed/${ videoId }` }
						title={ title }
						frameBorder="0"
						allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
						allowFullScreen
					></iframe>
				</div>
			) : (
				<button
					type="button"
					className="sgss-video play-icon ssgsw-video-trigger"
					onClick={ () => setPlaying( true ) }
					aria-label={ `${ __( 'Play video:', 'stock-sync-with-google-sheet-for-woocommerce' ) } ${ title }` }
				>
					<img src={ thumbnail } alt="" />
				</button>
			) }
		</div>
	);
};

export default VideoPlayer;