import { Button } from '@wordpress/components';
import Checklist from '../icons/checklist';
import { __ } from '@wordpress/i18n';
import { BlackCrown as Crown } from '../icons/crown';
import Close from '../icons/close';
import { useState, useEffect } from '@wordpress/element';

const GutenaFormsProPopup = ( { isPopup = false, show = false, hideHandler } ) => {

	const [ isVisible, setIsVisible ] = useState( false );

	useEffect( () => {
		setIsVisible( show );
	}, [ show ] );

	const handleClosePopupButton = ( e ) => {
		e.preventDefault();

		hideHandler();
		setIsVisible( false );
	}

	const featureList = gutenaFormsAdmin.featureList;

	return (
		<div className={ `gutena-forms__pro-popup-wrapper ${ isVisible ? 'visible' : 'invisible' }` }>
			<div className={ `gutena-forms__pro-popup` }>
				<div className={ 'gutena-forms__popup-header' }>
					<img style={ { width: '200px' }}
						src={ `${gutenaFormsAdmin.pluginURL}assets/img/logo.svg` } alt={ 'gutena-forms logo' } />

					<h1>Upgrade to Gutena Pro</h1>

					{ isPopup && (
						<div className={ 'gutena-froms__popup-close-button-container' }>
							<Button
								onClick={ handleClosePopupButton }
							>
								<Close />
							</Button>
						</div>
					) }
				</div>

				<div className={ 'gutena-forms__popup-actions' }>

					<div className={ 'gutena-forms__popup-content' }>
						{
							featureList.map( ( feature, index ) => {
								return (
									<div className={ 'gutena-forms__feature' } key={ index }>
										<Checklist />
										{ feature }
									</div>
								);
							} )
						}
					</div>

					<div style={ { display: 'flex', justifyContent: 'center', marginTop: '20px', height: '45px' } }>
						<Button className={ 'gutena-forms__pro-upgrade-button' } variant="primary" href="https://gutenaforms.com/pricing/?utm_source=plugin&utm_medium=pro_banner" target="_blank" rel="noopener noreferrer">
							<Crown />
							{ __( 'Get Pro Now - $49/Year', 'gutena-forms' ) }
						</Button>
					</div>

				</div>
			</div>
		</div>
	);
}

export default GutenaFormsProPopup;
