/**
 * External dependencies.
 */
import { memo, useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis -- LinkControl is needed for URL input functionality
import { InspectorControls, __experimentalLinkControl as LinkControl } from '@wordpress/block-editor';
import {
	__experimentalToolsPanel as ToolsPanel,
	__experimentalToolsPanelItem as ToolsPanelItem,
	__experimentalToggleGroupControl as ToggleGroupControl,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
	__experimentalVStack as VStack,
	__experimentalUnitControl as UnitControl,
	__experimentalUseCustomUnits as useCustomUnits,
	TextControl,
	SelectControl,
	CheckboxControl,
	TextareaControl,
	ToggleControl,
	Button,
	Modal,
	Notice,
	RangeControl,
} from '@wordpress/components';

/**
 * Internal dependencies.
 */
import Background from '@spectra-components/background';
import InspectorColor from '@spectra-components/inspector-color';

/**
 * Register Block Settings: General settings.
 *
 * @param {Object} props The element props.
 * @since x.x.x
 * @return {Element} The rendered block settings.
 */
const BlocksSettings = memo( ( props ) => {
	const {
		attributes: {
			newUserRole,
			afterRegisterActions,
			autoRegisterRedirectURL,
			emailTemplateType,
			emailTemplateSubject,
			emailTemplateMessage,
			emailTemplateMessageType,
			reCaptchaEnable,
			reCaptchaType,
			messageSuccessRegistration,
			showLabels,
			showIcons,
			// Demo message toggles
			demoSuccessMessage,
			demoErrorMessage,
			demoFieldErrorMessage,
			// Error messages
			messageInvalidEmailError,
			messageEmailMissingError,
			messageEmailAlreadyUsedError,
			messageInvalidUsernameError,
			messageUsernameAlreadyUsedError,
			messageInvalidPasswordError,
			messagePasswordConfirmError,
			messageTermsError,
			messageOtherError,
			hidereCaptchaBatch,
			overallAlignment,
		},
		setAttributes,
		clientId
	} = props;

	// Get available user roles from API
	const [userRoles, setUserRoles] = useState( [] );
	const [isEmailTemplateModalOpen, setIsEmailTemplateModalOpen] = useState( false );

	useEffect( () => {
		// Fetch user roles directly
		const formData = new FormData();
		formData.append( 'action', 'spectra_pro_block_register_get_roles' );
		formData.append( 'security', window.spectra_pro_blocks_info?.ajax_nonce || '' );
		
		fetch( window.spectra_pro_blocks_info?.ajax_url || window.ajaxurl || '/wp-admin/admin-ajax.php', {
			method: 'POST',
			body: formData,
		} )
		.then( response => response.json() )
		.then( result => {
			if ( result.success ) {
				setUserRoles( result.data );
			}
		} )
		.catch( () => {
			// Error fetching roles, set default
			setUserRoles( [] );
		} );
	}, [] );

	// Modal handlers
	const openEmailTemplateModal = () => setIsEmailTemplateModalOpen( true );
	const closeEmailTemplateModal = () => setIsEmailTemplateModalOpen( false );

	return (
		<>
			<InspectorControls group="settings">
				<ToolsPanel
					label={ __( 'Alignment', 'spectra-pro' ) }
					resetAll={ () => {
						setAttributes( {
							overallAlignment: 'left'
						} );
					} }
					panelId={ clientId }
				>
					<ToolsPanelItem
						hasValue={ () => overallAlignment !== 'left' }
						label={ __( 'Overall Alignment', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( { overallAlignment: 'left' } ) }
						isShownByDefault
					>
						<SelectControl
							__nextHasNoMarginBottom
							label={ __( 'Overall Alignment', 'spectra-pro' ) }
							value={ overallAlignment || 'left' }
							options={ [
								{ label: __( 'Left', 'spectra-pro' ), value: 'left' },
								{ label: __( 'Center', 'spectra-pro' ), value: 'center' },
								{ label: __( 'Right', 'spectra-pro' ), value: 'right' }
							] }
							onChange={ ( value ) => setAttributes( { overallAlignment: value } ) }
						/>
					</ToolsPanelItem>
				</ToolsPanel>
				<ToolsPanel
					label={ __( 'General', 'spectra-pro' ) }
					resetAll={ () => {
						setAttributes( {
							newUserRole: 'subscriber',
							showLabels: true,
							showIcons: true,
							afterRegisterActions: [],
						} );
					} }
					panelId={ clientId }
				>
					<ToolsPanelItem
						hasValue={ () => !! newUserRole && newUserRole !== 'subscriber' }
						label={ __( 'New User Role', 'spectra-pro' ) }
						onDeselect={ () => setAttributes( { newUserRole: 'subscriber' } ) }
						resetAllFilter={ () => ( { newUserRole: 'subscriber' } ) }
						isShownByDefault
						panelId={ clientId }
					>
						<SelectControl
							label={ __( 'New User Role', 'spectra-pro' ) }
							value={ newUserRole }
							options={ userRoles }
							onChange={ ( value ) => setAttributes( { newUserRole: value } ) }
							help={ __( 'Select the role for newly registered users.', 'spectra-pro' ) }
						/>
					</ToolsPanelItem>

					<ToolsPanelItem
						hasValue={ () => showLabels !== true }
						label={ __( 'Show Labels', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( { showLabels: true } ) }
						isShownByDefault
					>
						<ToggleControl
							__nextHasNoMarginBottom
							checked={ showLabels }
							label={ __( 'Show Field Labels', 'spectra-pro' ) }
							onChange={ () => setAttributes( { showLabels: ! showLabels } ) }
						/>
					</ToolsPanelItem>

					<ToolsPanelItem
						hasValue={ () => showIcons !== true }
						label={ __( 'Show Icons', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( { showIcons: true } ) }
						isShownByDefault
					>
						<ToggleControl
							__nextHasNoMarginBottom
							checked={ showIcons }
							label={ __( 'Show Field Icons', 'spectra-pro' ) }
							onChange={ () => setAttributes( { showIcons: ! showIcons } ) }
						/>
					</ToolsPanelItem>

				</ToolsPanel>

				<ToolsPanel
					label={ __( 'After Registration Actions', 'spectra-pro' ) }
					resetAll={ () => {
						setAttributes( {
							afterRegisterActions: [],
							autoRegisterRedirectURL: undefined,
							emailTemplateType: 'default',
						} );
					} }
					panelId={ clientId }
				>
					<ToolsPanelItem
						hasValue={ () => afterRegisterActions?.includes( 'autoLogin' ) }
						label={ __( 'Auto Login', 'spectra-pro' ) }
						onDeselect={ () => {
							const actions = afterRegisterActions || [];
							setAttributes( { afterRegisterActions: actions.filter( action => action !== 'autoLogin' ) } );
						} }
						resetAllFilter={ () => ( { afterRegisterActions: [] } ) }
						isShownByDefault
						panelId={ clientId }
					>
						<CheckboxControl
							label={ __( 'Auto Login', 'spectra-pro' ) }
							checked={ afterRegisterActions?.includes( 'autoLogin' ) }
							onChange={ ( checked ) => {
								const actions = afterRegisterActions || [];
								if ( checked ) {
									setAttributes( { afterRegisterActions: [...actions, 'autoLogin'] } );
								} else {
									setAttributes( { afterRegisterActions: actions.filter( action => action !== 'autoLogin' ) } );
								}
							} }
						/>
					</ToolsPanelItem>

					<ToolsPanelItem
						hasValue={ () => afterRegisterActions?.includes( 'redirect' ) }
						label={ __( 'Redirect', 'spectra-pro' ) }
						onDeselect={ () => {
							const actions = afterRegisterActions || [];
							setAttributes( { afterRegisterActions: actions.filter( action => action !== 'redirect' ) } );
						} }
						resetAllFilter={ () => ( { afterRegisterActions: [] } ) }
						isShownByDefault
						panelId={ clientId }
					>
						<CheckboxControl
							label={ __( 'Redirect', 'spectra-pro' ) }
							checked={ afterRegisterActions?.includes( 'redirect' ) }
							onChange={ ( checked ) => {
								const actions = afterRegisterActions || [];
								if ( checked ) {
									setAttributes( { afterRegisterActions: [...actions, 'redirect'] } );
								} else {
									setAttributes( { afterRegisterActions: actions.filter( action => action !== 'redirect' ) } );
								}
							} }
						/>
					</ToolsPanelItem>

					<ToolsPanelItem
						hasValue={ () => afterRegisterActions?.includes( 'sendMail' ) }
						label={ __( 'Send Email', 'spectra-pro' ) }
						onDeselect={ () => {
							const actions = afterRegisterActions || [];
							setAttributes( { afterRegisterActions: actions.filter( action => action !== 'sendMail' ) } );
						} }
						resetAllFilter={ () => ( { afterRegisterActions: [] } ) }
						isShownByDefault
						panelId={ clientId }
					>
						<CheckboxControl
							label={ __( 'Send Email', 'spectra-pro' ) }
							checked={ afterRegisterActions?.includes( 'sendMail' ) }
							onChange={ ( checked ) => {
								const actions = afterRegisterActions || [];
								if ( checked ) {
									setAttributes( { afterRegisterActions: [...actions, 'sendMail'] } );
								} else {
									setAttributes( { afterRegisterActions: actions.filter( action => action !== 'sendMail' ) } );
								}
							} }
						/>
					</ToolsPanelItem>

					{ ( afterRegisterActions?.includes( 'redirect' ) ) && (
						<ToolsPanelItem
							hasValue={ () => !! autoRegisterRedirectURL }
							label={ __( 'Redirect URL', 'spectra-pro' ) }
							onDeselect={ () => setAttributes( { autoRegisterRedirectURL: undefined } ) }
							resetAllFilter={ () => ( { autoRegisterRedirectURL: undefined } ) }
							isShownByDefault
							panelId={ clientId }
						>
							<LinkControl
								__nextHasNoMarginBottom
								searchInputPlaceholder={__( 'Enter redirect URL', 'spectra-pro' )}
								value={autoRegisterRedirectURL}
								onChange={ ( link ) => setAttributes( { autoRegisterRedirectURL: link } ) }
								withCreateSuggestion={true}
								onRemove={() => setAttributes( { autoRegisterRedirectURL: undefined } )}
							/>
						</ToolsPanelItem>
					) }


					{ afterRegisterActions?.includes( 'sendMail' ) && (
						<>
							<ToolsPanelItem
								hasValue={ () => !! emailTemplateType && emailTemplateType !== 'default' }
								label={ __( 'Email Template Type', 'spectra-pro' ) }
								onDeselect={ () => setAttributes( { emailTemplateType: 'default' } ) }
								resetAllFilter={ () => ( { emailTemplateType: 'default' } ) }
								isShownByDefault
								panelId={ clientId }
							>
								<SelectControl
									label={ __( 'Email Template Type', 'spectra-pro' ) }
									value={ emailTemplateType }
									options={ [
										{ label: __( 'Default WordPress', 'spectra-pro' ), value: 'default' },
										{ label: __( 'Custom', 'spectra-pro' ), value: 'custom' },
									] }
									onChange={ ( value ) => setAttributes( { emailTemplateType: value } ) }
								/>
							</ToolsPanelItem>
							
							{ emailTemplateType === 'custom' && (
								<ToolsPanelItem
									hasValue={ () => true }
									label={ __( 'Customize Template', 'spectra-pro' ) }
									onDeselect={ () => {} }
									isShownByDefault
									panelId={ clientId }
								>
									<Button
										variant="secondary"
										onClick={ openEmailTemplateModal }
									>
										{ __( 'Customize Email Template', 'spectra-pro' ) }
									</Button>
								</ToolsPanelItem>
							) }
						</>
					) }
				</ToolsPanel>				
				<ToolsPanel
					label={ __( 'Google ReCAPTCHA', 'spectra-pro' ) }
					resetAll={ () => {
						setAttributes( {
							reCaptchaEnable: false,
							reCaptchaType: 'v2',
						} );
					} }
					panelId={ clientId }
				>
					<ToolsPanelItem
						hasValue={ () => reCaptchaEnable !== false }
						label={ __( 'Enable ReCAPTCHA', 'spectra-pro' ) }
						onDeselect={ () => setAttributes( { reCaptchaEnable: false } ) }
						resetAllFilter={ () => ( { reCaptchaEnable: false } ) }
						isShownByDefault
						panelId={ clientId }
					>
						<VStack spacing={ 4 }>
							<Notice className="spectra-sidebar-settings-notice" status="warning" isDismissible={ false }>
								{__( 'Please configure the Google reCAPTCHA Site & Secret key from', 'spectra-pro' )}{ ' ' }
								<a
									target="_blank"
									href={ `${ window.location.origin }/wp-admin/admin.php?page=spectra&path=settings&settings=block-settings` }
									rel="noreferrer"
								>
									here.
								</a>
							</Notice>

							<ToggleControl
								__nextHasNoMarginBottom
								label={ __( 'Enable ReCAPTCHA', 'spectra-pro' ) }
								checked={ reCaptchaEnable }
								onChange={ ( value ) => setAttributes( { reCaptchaEnable: value } ) }
							/>

							{ reCaptchaEnable && (
								<>
									<Notice className="spectra-sidebar-settings-notice" status="warning" isDismissible={ false }>
										{__( 'P.S. Note that If you are using two forms on the same page with the different reCAPTCHA versions (V2 checkbox and V3), it will create conflicts between the versions. Kindly avoid using different versions on same page.', 'spectra-pro' )}{ ' ' }
									</Notice>

									<ToggleGroupControl
										__next40pxDefaultSize
										__nextHasNoMarginBottom
										isBlock
										label={ __( 'reCAPTCHA Version', 'spectra-pro' ) }
										value={ reCaptchaType }
										onChange={ ( value ) => setAttributes( { reCaptchaType: value } ) }
									>
										<ToggleGroupControlOption value="v2" label="v2" />
										<ToggleGroupControlOption value="v3" label="v3" />
									</ToggleGroupControl>

									{ reCaptchaType === 'v3' && (
										<ToggleControl
											__nextHasNoMarginBottom
											label={ __( 'Hide reCAPTCHA Badge', 'spectra-pro' ) }
											checked={ hidereCaptchaBatch }
											onChange={ ( value ) => setAttributes( { hidereCaptchaBatch: value } ) }
										/>
									) }
								</>
							) }
						</VStack>
					</ToolsPanelItem>
				</ToolsPanel>
				
				<ToolsPanel
					label={ __( 'Error Messages', 'spectra-pro' ) }
					resetAll={ () => {
						setAttributes( {
							messageInvalidEmailError: '',
							messageEmailMissingError: '',
							messageEmailAlreadyUsedError: '',
							messageInvalidUsernameError: '',
							messageUsernameAlreadyUsedError: '',
							messageInvalidPasswordError: '',
							messagePasswordConfirmError: '',
							messageTermsError: '',
							messageOtherError: '',
							messageSuccessRegistration: '',
						} );
					} }
					panelId={ clientId }
				>
					<ToolsPanelItem
						hasValue={ () => !! messageInvalidEmailError }
						label={ __( 'Invalid Email', 'spectra-pro' ) }
						onDeselect={ () => setAttributes( { messageInvalidEmailError: '' } ) }
						resetAllFilter={ () => ( { messageInvalidEmailError: '' } ) }
						isShownByDefault
						panelId={ clientId }
					>
						<TextControl
							label={ __( 'Invalid Email', 'spectra-pro' ) }
							value={ messageInvalidEmailError }
							onChange={ ( value ) => setAttributes( { messageInvalidEmailError: value } ) }
						/>
					</ToolsPanelItem>
					
					<ToolsPanelItem
						hasValue={ () => !! messageEmailMissingError }
						label={ __( 'Email Missing', 'spectra-pro' ) }
						onDeselect={ () => setAttributes( { messageEmailMissingError: '' } ) }
						resetAllFilter={ () => ( { messageEmailMissingError: '' } ) }
						isShownByDefault
						panelId={ clientId }
					>
						<TextControl
							label={ __( 'Email Missing', 'spectra-pro' ) }
							value={ messageEmailMissingError }
							onChange={ ( value ) => setAttributes( { messageEmailMissingError: value } ) }
						/>
					</ToolsPanelItem>
					
					<ToolsPanelItem
						hasValue={ () => !! messageEmailAlreadyUsedError }
						label={ __( 'Email Already Used', 'spectra-pro' ) }
						onDeselect={ () => setAttributes( { messageEmailAlreadyUsedError: '' } ) }
						resetAllFilter={ () => ( { messageEmailAlreadyUsedError: '' } ) }
						isShownByDefault
						panelId={ clientId }
					>
						<TextControl
							label={ __( 'Email Already Used', 'spectra-pro' ) }
							value={ messageEmailAlreadyUsedError }
							onChange={ ( value ) => setAttributes( { messageEmailAlreadyUsedError: value } ) }
						/>
					</ToolsPanelItem>
					
					<ToolsPanelItem
						hasValue={ () => !! messageInvalidUsernameError }
						label={ __( 'Invalid Username', 'spectra-pro' ) }
						onDeselect={ () => setAttributes( { messageInvalidUsernameError: '' } ) }
						resetAllFilter={ () => ( { messageInvalidUsernameError: '' } ) }
						isShownByDefault
						panelId={ clientId }
					>
						<TextControl
							label={ __( 'Invalid Username', 'spectra-pro' ) }
							value={ messageInvalidUsernameError }
							onChange={ ( value ) => setAttributes( { messageInvalidUsernameError: value } ) }
						/>
					</ToolsPanelItem>
					
					<ToolsPanelItem
						hasValue={ () => !! messageUsernameAlreadyUsedError }
						label={ __( 'Username Already Used', 'spectra-pro' ) }
						onDeselect={ () => setAttributes( { messageUsernameAlreadyUsedError: '' } ) }
						resetAllFilter={ () => ( { messageUsernameAlreadyUsedError: '' } ) }
						isShownByDefault
						panelId={ clientId }
					>
						<TextControl
							label={ __( 'Username Already Used', 'spectra-pro' ) }
							value={ messageUsernameAlreadyUsedError }
							onChange={ ( value ) => setAttributes( { messageUsernameAlreadyUsedError: value } ) }
						/>
					</ToolsPanelItem>
					
					<ToolsPanelItem
						hasValue={ () => !! messageInvalidPasswordError }
						label={ __( 'Invalid Password', 'spectra-pro' ) }
						onDeselect={ () => setAttributes( { messageInvalidPasswordError: '' } ) }
						resetAllFilter={ () => ( { messageInvalidPasswordError: '' } ) }
						isShownByDefault
						panelId={ clientId }
					>
						<TextControl
							label={ __( 'Invalid Password', 'spectra-pro' ) }
							value={ messageInvalidPasswordError }
							onChange={ ( value ) => setAttributes( { messageInvalidPasswordError: value } ) }
						/>
					</ToolsPanelItem>
					
					<ToolsPanelItem
						hasValue={ () => !! messagePasswordConfirmError }
						label={ __( 'Password Mismatch', 'spectra-pro' ) }
						onDeselect={ () => setAttributes( { messagePasswordConfirmError: '' } ) }
						resetAllFilter={ () => ( { messagePasswordConfirmError: '' } ) }
						isShownByDefault
						panelId={ clientId }
					>
						<TextControl
							label={ __( 'Password Mismatch', 'spectra-pro' ) }
							value={ messagePasswordConfirmError }
							onChange={ ( value ) => setAttributes( { messagePasswordConfirmError: value } ) }
						/>
					</ToolsPanelItem>
					
					<ToolsPanelItem
						hasValue={ () => !! messageTermsError }
						label={ __( 'Terms Not Accepted', 'spectra-pro' ) }
						onDeselect={ () => setAttributes( { messageTermsError: '' } ) }
						resetAllFilter={ () => ( { messageTermsError: '' } ) }
						isShownByDefault
						panelId={ clientId }
					>
						<TextControl
							label={ __( 'Terms Not Accepted', 'spectra-pro' ) }
							value={ messageTermsError }
							onChange={ ( value ) => setAttributes( { messageTermsError: value } ) }
						/>
					</ToolsPanelItem>
					
					<ToolsPanelItem
						hasValue={ () => !! messageOtherError }
						label={ __( 'Other Errors', 'spectra-pro' ) }
						onDeselect={ () => setAttributes( { messageOtherError: '' } ) }
						resetAllFilter={ () => ( { messageOtherError: '' } ) }
						isShownByDefault
						panelId={ clientId }
					>
						<TextControl
							label={ __( 'Other Errors', 'spectra-pro' ) }
							value={ messageOtherError }
							onChange={ ( value ) => setAttributes( { messageOtherError: value } ) }
						/>
					</ToolsPanelItem>
					
					<ToolsPanelItem
						hasValue={ () => !! messageSuccessRegistration }
						label={ __( 'Success Message', 'spectra-pro' ) }
						onDeselect={ () => setAttributes( { messageSuccessRegistration: '' } ) }
						resetAllFilter={ () => ( { messageSuccessRegistration: '' } ) }
						isShownByDefault
						panelId={ clientId }
					>
						<TextControl
							label={ __( 'Success Message', 'spectra-pro' ) }
							value={ messageSuccessRegistration }
							onChange={ ( value ) => setAttributes( { messageSuccessRegistration: value } ) }
						/>
					</ToolsPanelItem>
				</ToolsPanel>

				<ToolsPanel
					label={ __( 'Success/Error Message Preview', 'spectra-pro' ) }
					resetAll={ () => {
						setAttributes( {
							demoSuccessMessage: false,
							demoErrorMessage: false,
							demoFieldErrorMessage: false,
						} );
					} }
					panelId={ clientId }
				>
					<ToolsPanelItem
						hasValue={ () => !! demoSuccessMessage }
						label={ __( 'View Success Message', 'spectra-pro' ) }
						onDeselect={ () => setAttributes( { demoSuccessMessage: false } ) }
						resetAllFilter={ () => ( { demoSuccessMessage: false } ) }
						isShownByDefault
						panelId={ clientId }
					>
						<ToggleControl
							label={ __( 'View Success Message', 'spectra-pro' ) }
							checked={ demoSuccessMessage }
							onChange={ ( value ) => setAttributes( { demoSuccessMessage: value } ) }
						/>
					</ToolsPanelItem>

					<ToolsPanelItem
						hasValue={ () => !! demoErrorMessage }
						label={ __( 'View Error Message', 'spectra-pro' ) }
						onDeselect={ () => setAttributes( { demoErrorMessage: false } ) }
						resetAllFilter={ () => ( { demoErrorMessage: false } ) }
						isShownByDefault
						panelId={ clientId }
					>
						<ToggleControl
							label={ __( 'View Error Message', 'spectra-pro' ) }
							checked={ demoErrorMessage }
							onChange={ ( value ) => setAttributes( { demoErrorMessage: value } ) }
						/>
					</ToolsPanelItem>

					<ToolsPanelItem
						hasValue={ () => !! demoFieldErrorMessage }
						label={ __( 'View Field Error Message', 'spectra-pro' ) }
						onDeselect={ () => setAttributes( { demoFieldErrorMessage: false } ) }
						resetAllFilter={ () => ( { demoFieldErrorMessage: false } ) }
						isShownByDefault
						panelId={ clientId }
					>
						<ToggleControl
							label={ __( 'View Field Error Message', 'spectra-pro' ) }
							checked={ demoFieldErrorMessage }
							onChange={ ( value ) => setAttributes( { demoFieldErrorMessage: value } ) }
						/>
					</ToolsPanelItem>
				</ToolsPanel>
				
			</InspectorControls>
			
			{ isEmailTemplateModalOpen && (
				<Modal
					title={ __( 'Email Template', 'spectra-pro' ) }
					onRequestClose={ closeEmailTemplateModal }
					className="spectra-pro-register-email-modal"
				>
					<div className="spectra-pro-register-email-modal__content">
						<TextControl
							label={ __( 'Subject', 'spectra-pro' ) }
							value={ emailTemplateSubject }
							onChange={ ( value ) => setAttributes( { emailTemplateSubject: value } ) }
							help={ __( 'Use {{site_title}} to include site name', 'spectra-pro' ) }
						/>
						
						<TextareaControl
							label={ __( 'Message', 'spectra-pro' ) }
							value={ emailTemplateMessage }
							onChange={ ( value ) => setAttributes( { emailTemplateMessage: value } ) }
							rows={ 10 }
							help={ __( 'HTML Supported', 'spectra-pro' ) }
						/>
						
						<Notice status="warning" isDismissible={ false }>
							<strong>{ __( 'Note:', 'spectra-pro' ) }</strong>{ ' ' }
							{ __(
								'If you wish to send System Generated Password in the email content, use shortcode -',
								'spectra-pro'
							) }{ ' ' }
							{ '[field=password]. You can also use other shortcodes like {{login_url}}, [field=username], [field=email], [field=first_name], [field=last_name] and {{site_title}}' }
						</Notice>
						
						<SelectControl
							label={ __( 'Send As', 'spectra-pro' ) }
							value={ emailTemplateMessageType }
							options={ [
								{ label: __( 'HTML', 'spectra-pro' ), value: 'html' },
								{ label: __( 'Plain Text', 'spectra-pro' ), value: 'plain' },
							] }
							onChange={ ( value ) => setAttributes( { emailTemplateMessageType: value } ) }
						/>
					</div>
					
					<div className="spectra-pro-register-email-modal__footer">
						<span className="spectra-pro-register-email-modal__footer-notice">
							<i className="dashicons dashicons-warning"></i>
							{ __(
								'Make sure to update your post for changes to take effect.',
								'spectra-pro'
							) }
						</span>
						<Button variant="secondary" onClick={ closeEmailTemplateModal }>
							{ __( 'Return To Post', 'spectra-pro' ) }
						</Button>
					</div>
				</Modal>
			) }
		</>
	);
} );

/**
 * Register Block Settings: Style settings.
 *
 * @param {Object} props The element props.
 * @since x.x.x
 * @return {Element} The rendered block styles.
 */
const BlockStyles = memo( ( props ) => {
    const {
        clientId,
        setAttributes,
		attributes,
		context,
    } = props;

	const {
		background,
		backgroundColor,
		backgroundColorHover,
		backgroundGradient,
		backgroundGradientHover,
		dimRatio
	} = attributes;

    return (
		<InspectorControls group="styles">
			<Background
				{ ...{
					clientId,
					attributes,
					setAttributes,
					background: {
						label: 'background',
						value: background,
					},
					backgroundColor,
					backgroundColorHover,
					backgroundGradient,
					backgroundGradientHover,
					context,
					dimRatio
				} }
			/>
		</InspectorControls>
    );
} );

/**
 * Register Block Settings: Color panel settings.
 *
 * @param {Object} props The element props.
 * @since x.x.x
 * @return {Element} The rendered block settings.
 */
const ColorSettings = memo( ( props ) => {

	// Destructure the required props.
	const {
		clientId,
		setAttributes,
		attributes: {
			backgroundColor,
			backgroundGradient,
			backgroundColorHover,
			backgroundGradientHover,
			labelColor,
			labelColorHover,
			inputTextColor,
			inputTextColorHover,
			inputBgColor,
			inputBgColorHover,
			inputPlaceholderColor,
			inputPlaceholderColorHover,
			iconColor,
			linkColor,
			linkColorHover
		},
	} = props;

	return (
		<InspectorColor
			settings={ [
				{
					colorValue: backgroundColor,
					gradientValue: backgroundGradient,
					label: __( 'Background', 'spectra-pro' ),
					onColorChange: ( value ) => setAttributes( { backgroundColor: value } ),
					onGradientChange: ( value ) => setAttributes( { backgroundGradient: value } ),
					resetAllFilter: () => setAttributes( {
						backgroundColor: undefined,
						backgroundGradient: undefined,
					} ),
				},
				{
					colorValue: backgroundColorHover,
					gradientValue: backgroundGradientHover,
					label: __( 'Background Hover', 'spectra-pro' ),
					onColorChange: ( value ) => setAttributes( { backgroundColorHover: value } ),
					onGradientChange: ( value ) => setAttributes( { backgroundGradientHover: value } ),
					resetAllFilter: () => setAttributes( {
						backgroundColorHover: undefined,
						backgroundGradientHover: undefined,
					} ),
				},
				{
					colorValue: labelColor,
					label: __( 'Label', 'spectra-pro' ),
					onColorChange: ( value ) => setAttributes( { labelColor: value } ),
					resetAllFilter: () => setAttributes( { labelColor: undefined } ),
				},
				{
					colorValue: labelColorHover,
					label: __( 'Label Hover', 'spectra-pro' ),
					onColorChange: ( value ) => setAttributes( { labelColorHover: value } ),
					resetAllFilter: () => setAttributes( { labelColorHover: undefined } ),
				},
				{
					colorValue: inputTextColor,
					label: __( 'Input Text', 'spectra-pro' ),
					onColorChange: ( value ) => setAttributes( { inputTextColor: value } ),
					resetAllFilter: () => setAttributes( { inputTextColor: undefined } ),
				},
				{
					colorValue: inputTextColorHover,
					label: __( 'Input Text Hover', 'spectra-pro' ),
					onColorChange: ( value ) => setAttributes( { inputTextColorHover: value } ),
					resetAllFilter: () => setAttributes( { inputTextColorHover: undefined } ),
				},
				{
					colorValue: inputBgColor,
					label: __( 'Input Background', 'spectra-pro' ),
					onColorChange: ( value ) => setAttributes( { inputBgColor: value } ),
					resetAllFilter: () => setAttributes( { inputBgColor: undefined } ),
				},
				{
					colorValue: inputBgColorHover,
					label: __( 'Input Background Hover', 'spectra-pro' ),
					onColorChange: ( value ) => setAttributes( { inputBgColorHover: value } ),
					resetAllFilter: () => setAttributes( { inputBgColorHover: undefined } ),
				},
				{
					colorValue: inputPlaceholderColor,
					label: __( 'Input Placeholder', 'spectra-pro' ),
					onColorChange: ( value ) => setAttributes( { inputPlaceholderColor: value } ),
					resetAllFilter: () => setAttributes( { inputPlaceholderColor: undefined } ),
					help: __( 'Default placeholder color for form inputs. Can be overridden by individual input blocks.', 'spectra-pro' ),
				},
				{
					colorValue: inputPlaceholderColorHover,
					label: __( 'Input Placeholder Hover', 'spectra-pro' ),
					onColorChange: ( value ) => setAttributes( { inputPlaceholderColorHover: value } ),
					resetAllFilter: () => setAttributes( { inputPlaceholderColorHover: undefined } ),
				},
				{
					colorValue: iconColor,
					label: __( 'Icon Color', 'spectra-pro' ),
					onColorChange: ( value ) => setAttributes( { iconColor: value } ),
					resetAllFilter: () => setAttributes( { iconColor: undefined } ),
				},
				{
					colorValue: linkColor,
					label: __( 'Link Color', 'spectra-pro' ),
					onColorChange: ( value ) => setAttributes( { linkColor: value } ),
					resetAllFilter: () => setAttributes( { linkColor: undefined } ),
				},
				{
					colorValue: linkColorHover,
					label: __( 'Link Hover', 'spectra-pro' ),
					onColorChange: ( value ) => setAttributes( { linkColorHover: value } ),
					resetAllFilter: () => setAttributes( { linkColorHover: undefined } ),
				}
			] }
			panelId={ clientId }
		/>
	);
} );


/**
 * Element Sub-settings: Settings that are injected into Core's Color panel.
 *
 * @param {Object} props The element props.
 * @since x.x.x
 * @return {Element} The rendered block opacity styles.
 */
const OpacitySettings = memo( ( props ) => {
	const {
		clientId,
		setAttributes,
		attributes: {
			dimRatio
		},
	} = props;

	return (
		<InspectorControls group="color">
			<ToolsPanelItem
				hasValue={() => !! dimRatio }
				label={__( 'Overlay Opacity', 'spectra-pro' ) }
				onDeselect={() => setAttributes( { dimRatio: undefined } )}
				resetAllFilter={() => ( {
					dimRatio: undefined,
				} )}
				isShownByDefault
				panelId={clientId}
			>
				<RangeControl
					__nextHasNoMarginBottom
					label={__( 'Overlay Opacity', 'spectra-pro' ) }
					value={dimRatio}
					onChange={( value ) => setAttributes( { dimRatio: value } )}
					min={0}
					max={100}
					step={5}
				/>
			</ToolsPanelItem>
		</InspectorControls>
	);
} );

/**
 * Dimension settings for register block.
 *
 * @param {Object} props The element props.
 * @since 2.0.0
 * @return {Element} The rendered settings.
 */
const DimensionSettings = memo( ( props ) => {
	const { attributes, setAttributes, clientId } = props;
	const { width } = attributes;

	return (
		<InspectorControls group="dimensions">
			<ToolsPanelItem
				hasValue={ () => !! width }
				label={ __( 'Width', 'spectra-pro' ) }
				panelId={ clientId }
				onDeselect={ () => setAttributes( { width: undefined } ) }
				isShownByDefault
			>
				<UnitControl
					__nextHasNoMarginBottom
					label={ __( 'Width', 'spectra-pro' ) }
					value={ width }
					onChange={ ( value ) => setAttributes( { width: value } ) }
					units={ useCustomUnits( { availableUnits: [ '%', 'px', 'em', 'rem', 'vw' ] } ) }
				/>
			</ToolsPanelItem>
		</InspectorControls>
	);
} );

/**
 * The Editor settings for this block.
 *
 * @param {Object} props The element props.
 * @since x.x.x
 * @return {Element} The rendered settings.
 */
const Settings = ( props ) => {

	return (
		<>
			<BlocksSettings { ...{ ...props } } />
			<DimensionSettings { ...{ ...props } } />
			<ColorSettings { ...{ ...props } } />
			<OpacitySettings { ...{ ...props } } />
			<BlockStyles {...{ ...props }} />
		</>
	);
};

export default memo( Settings );