/**
 * External dependencies.
 */
import { useBlockProps } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { memo } from '@wordpress/element';

/**
 * The Editor Block render for Form reCAPTCHA.
 *
 * @param {Object} props The element props.
 * @since 2.0.0
 * @return {Element} The rendered block.
 */
const Render = ( props ) => {
	const {
		attributes: {
			recaptchaVersion,
			recaptchaSize,
			recaptchaTheme,
			isEnabled
		},
		context,
	} = props;

	// Get context values
	const contextIsEnabled = context['spectra-pro/form/enableRecaptcha'] !== undefined 
		? context['spectra-pro/form/enableRecaptcha'] 
		: isEnabled;
	const contextRecaptchaVersion = context['spectra-pro/form/recaptchaVersion'] || recaptchaVersion;
	const contextRecaptchaSize = context['spectra-pro/form/recaptchaSize'] || recaptchaSize;
	const contextRecaptchaTheme = context['spectra-pro/form/recaptchaTheme'] || recaptchaTheme;
	const contextHideBatch = context['spectra-pro/form/hidereCaptchaBatch'] || false;

	const blockProps = useBlockProps( {
		className: `spectra-pro-form-recaptcha spectra-pro-form-recaptcha--${contextRecaptchaVersion} ${ !contextIsEnabled ? 'spectra-pro-form-recaptcha--disabled' : '' }`
	} );

	// Don't render if reCAPTCHA is not enabled
	if ( ! contextIsEnabled ) {
		return (
			<div { ...blockProps }>
				<div className="spectra-pro-form-recaptcha__disabled-notice">
					<span className="spectra-pro-form-recaptcha__notice-icon">🔒</span>
					<span className="spectra-pro-form-recaptcha__notice-text">
						{ __( 'reCAPTCHA is disabled. Enable it in the form settings.', 'spectra-pro' ) }
					</span>
				</div>
			</div>
		);
	}

	return (
		<div { ...blockProps }>
			<div className="spectra-pro-form-recaptcha__wrapper">
				{ contextRecaptchaVersion === 'v2' ? (
					<div className="spectra-pro-form-recaptcha__preview">
						<div 
							className={ `spectra-pro-form-recaptcha__v2-preview spectra-pro-form-recaptcha__v2-preview--${contextRecaptchaSize} spectra-pro-form-recaptcha__v2-preview--${contextRecaptchaTheme}` }
						>
							<div className="spectra-pro-form-recaptcha__checkbox">
								<input 
									type="checkbox" 
									disabled 
									className="spectra-pro-form-recaptcha__checkbox-input"
								/>
							</div>
							<div className="spectra-pro-form-recaptcha__label">
								<span>{ __( 'I\'m not a robot', 'spectra-pro' ) }</span>
							</div>
							<div className="spectra-pro-form-recaptcha__logo">
								<span>reCAPTCHA</span>
							</div>
						</div>
						{ ! contextHideBatch && (
							<div className="spectra-pro-form-recaptcha__badge">
								<span>{ __( 'Protected by reCAPTCHA', 'spectra-pro' ) }</span>
							</div>
						) }
					</div>
				) : (
					<div className="spectra-pro-form-recaptcha__preview">
						<div className="spectra-pro-form-recaptcha__v3-preview">
							<div className="spectra-pro-form-recaptcha__v3-badge">
								<span className="spectra-pro-form-recaptcha__v3-icon">🛡️</span>
								<span>{ __( 'reCAPTCHA v3 (Invisible)', 'spectra-pro' ) }</span>
							</div>
							<div className="spectra-pro-form-recaptcha__v3-info">
								{ __( 'This form is protected by invisible reCAPTCHA v3', 'spectra-pro' ) }
							</div>
						</div>
						{ ! contextHideBatch && (
							<div className="spectra-pro-form-recaptcha__badge">
								<span>{ __( 'Protected by reCAPTCHA', 'spectra-pro' ) }</span>
							</div>
						) }
					</div>
				) }
			</div>
		</div>
	);
};

export default memo( Render );