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

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

/**
 * Element Sub-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,
		setAttributes,
		clientId
	} = props;

	const {
		rememberLabel,
		submitButtonText,
		forgotPasswordText,
		forgotPasswordUrl,
		registerLinkText,
		registerLinkUrl,
		showLabels,
		showIcons,
		showRememberMe,
		showForgotPassword,
		showRegisterLink,
		enableRecaptcha,
		recaptchaVersion,
		redirectAfterLoginURL,
		redirectAfterLogoutURL,
		overallAlignment,
		// message toggles
		demoSuccessMessage,
		demoErrorMessage,
		// custom messages
		successMessageText,
		errorMessageText,
		// redirects
		enableLoggedInMessage
	} = attributes;

	/**
	 * Resets all general settings to their default values.
	 */
	const resetAllGeneralSettings = () => {
		setAttributes( {
			rememberLabel: 'Remember Me',
			submitButtonText: 'Log In',
			forgotPasswordText: 'Lost your password?',
			showLabels: true,
			showIcons: true,
			showRememberMe: true,
			showForgotPassword: true,
			showRegisterLink: true,
			loginSize: 'default',
			ctaIcon: '',
			ctaIconPosition: 'after',
			ctaIconSpace: '5px',
			overallAlignment: 'left'
		} );
	};

	/**
	 * Resets all redirect settings to their default values.
	 */
	const resetAllRedirectSettings = () => {
		setAttributes( {
			redirectAfterLoginURL: undefined,
			redirectAfterLogoutURL: undefined,
			enableLoggedInMessage: true
		} );
	};

	/**
	 * Resets all reCAPTCHA settings to their default values.
	 */
	const resetAllReCaptchaSettings = () => {
		setAttributes( {
			enableRecaptcha: false,
			recaptchaVersion: 'v2'
		} );
	};

	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 }
							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={ __( 'Login Form', 'spectra-pro' ) }
					resetAll={ resetAllGeneralSettings }
					panelId={ clientId }
				>
					<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>
					<ToolsPanelItem
						hasValue={ () => !! rememberLabel && rememberLabel !== 'Remember Me' }
						label={ __( 'Remember Me Label', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( { rememberLabel: 'Remember Me' } ) }
						isShownByDefault
					>
						<TextControl
							__next40pxDefaultSize
							__nextHasNoMarginBottom
							label={ __( 'Remember Me Label', 'spectra-pro' ) }
							value={ rememberLabel }
							onChange={ ( value ) => setAttributes( { rememberLabel: value } ) }
						/>
					</ToolsPanelItem>
					<ToolsPanelItem
						hasValue={ () => !! submitButtonText && submitButtonText !== 'Log In' }
						label={ __( 'Submit Button Text', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( { submitButtonText: 'Log In' } ) }
						isShownByDefault
					>
						<TextControl
							__next40pxDefaultSize
							__nextHasNoMarginBottom
							label={ __( 'Submit Button Text', 'spectra-pro' ) }
							value={ submitButtonText }
							onChange={ ( value ) => setAttributes( { submitButtonText: value } ) }
						/>
					</ToolsPanelItem>
					<ToolsPanelItem
						hasValue={ () => !! forgotPasswordText && forgotPasswordText !== 'Lost your password?' }
						label={ __( 'Forgot Password Text', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( {
							forgotPasswordText: 'Lost your password?',
						} ) }
						isShownByDefault
					>
						<TextControl
							__next40pxDefaultSize
							__nextHasNoMarginBottom
							label={ __( 'Forgot Password Text', 'spectra-pro' ) }
							value={ forgotPasswordText }
							onChange={ ( value ) => {
								setAttributes( { forgotPasswordText: value } );
							} }
						/>
					</ToolsPanelItem>
					<ToolsPanelItem
						hasValue={ () => !! forgotPasswordUrl && forgotPasswordUrl !== '#' }
						label={ __( 'Forgot Password URL', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( { forgotPasswordUrl: '#' } ) }
						isShownByDefault
					>
						<TextControl
							__next40pxDefaultSize
							__nextHasNoMarginBottom
							label={ __( 'Forgot Password URL', 'spectra-pro' ) }
							value={ forgotPasswordUrl }
							onChange={ ( value ) => setAttributes( { forgotPasswordUrl: value } ) }
							placeholder={ __( 'Enter URL', 'spectra-pro' ) }
						/>
					</ToolsPanelItem>
				</ToolsPanel>
				<ToolsPanel
					label={ __( 'Register Information', 'spectra-pro' ) }
					resetAll={ () => {
						setAttributes( {
							showRegisterLink: true,
							showRememberMe: true,
							showForgotPassword: true,
							registerLinkText: "Don't have an account? Register",
							registerLinkUrl: undefined
						} )
					} }
					panelId={ clientId }
				>
					<ToolsPanelItem
						hasValue={ () => showRememberMe !== true }
						label={ __( 'Show Remember Me', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( {
							showRememberMe: true,
						} ) }
						isShownByDefault
					>
						<ToggleControl
							__nextHasNoMarginBottom
							checked={ showRememberMe }
							label={ __( 'Show Remember Me', 'spectra-pro' ) }
							onChange={ () => setAttributes( { showRememberMe: ! showRememberMe } ) }
						/>
					</ToolsPanelItem>
					<ToolsPanelItem
						hasValue={ () => showForgotPassword !== true }
						label={ __( 'Show Forgot Password', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( {
							showForgotPassword: true,
						} ) }
						isShownByDefault
					>
						<ToggleControl
							__nextHasNoMarginBottom
							checked={ showForgotPassword }
							label={ __( 'Show Forgot Password', 'spectra-pro' ) }
							onChange={ () => setAttributes( { showForgotPassword: ! showForgotPassword } ) }
						/>
					</ToolsPanelItem>
					<ToolsPanelItem
						hasValue={ () => showRegisterLink !== true }
						label={ __( 'Show Register Link', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( {
							showRegisterLink: true,
						} ) }
						isShownByDefault
					>
						<ToggleControl
							__nextHasNoMarginBottom
							checked={ showRegisterLink }
							label={ __( 'Show Register Link', 'spectra-pro' ) }
							onChange={ () => setAttributes( { showRegisterLink: ! showRegisterLink } ) }
						/>
					</ToolsPanelItem>
					{ showRegisterLink && (
							<ToolsPanelItem
							hasValue={ () => !! registerLinkUrl && registerLinkUrl !== '' }
							label={ __( 'Register Link URL', 'spectra-pro' ) }
							panelId={ clientId }
							onDeselect={ () => setAttributes( { registerLinkUrl: '' } ) }
							isShownByDefault
						>
							<TextControl
								__next40pxDefaultSize
								__nextHasNoMarginBottom
								label={ __( 'Register Link URL', 'spectra-pro' ) }
								value={ registerLinkUrl }
								onChange={ ( value ) => setAttributes( { registerLinkUrl: value } ) }
								placeholder={ __( 'Enter URL', 'spectra-pro' ) }
							/>
						</ToolsPanelItem>
					) }
					{ showRegisterLink && (
							<ToolsPanelItem
							hasValue={ () => !! registerLinkText }
							label={ __( 'Register Link Text', 'spectra-pro' ) }
							panelId={ clientId }
							onDeselect={ () => setAttributes( { registerLinkText: "Don't have an account? Register" } ) }
							resetAll={ () => ( { registerLinkText: "Don't have an account? Register" } ) }
							isShownByDefault
						>
							<TextControl
								label={ __( 'Register Link Text', 'spectra-pro' ) }
								value={ registerLinkText }
								onChange={ ( value ) => setAttributes( { registerLinkText: value } ) }
							/>
						</ToolsPanelItem>
					) }
				</ToolsPanel>
				<ToolsPanel
					label={ __( 'Success/Error Message', 'spectra-pro' ) }
					resetAll={ () => {
						setAttributes( {
							htmlTag: 'div',
							overflow: 'visible',
						} )
					} }
					panelId={ clientId }
				>
					{/* 
						This tool panel item controls the HTML tag for the block.
						Reset conditions:
						- The htmlTag attribute is set. Default: 'div'.
					*/}
					<ToolsPanelItem
						hasValue={ () => !! demoSuccessMessage }
						label={ __( 'View Success Message', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( {
							demoSuccessMessage: false,
						} ) }
						resetAll={ () => ( {
							demoSuccessMessage: false,
						} ) }
						isShownByDefault
					>
					<ToggleControl
						checked={ demoSuccessMessage }
						label={ __( 'View Success Message', 'spectra-pro' ) }
						onChange={ () => setAttributes( { demoSuccessMessage: ! demoSuccessMessage } ) }
					/>
					</ToolsPanelItem>
					<ToolsPanelItem
						hasValue={ () => !! demoErrorMessage }
						label={ __( 'View Error Message', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( {
							demoErrorMessage: false,
						} ) }
						resetAll={ () => ( {
							demoErrorMessage: false,
						} ) }
						isShownByDefault
					>
					<ToggleControl
						checked={ demoErrorMessage }
						label={ __( 'View Error Message', 'spectra-pro' ) }
						onChange={ () => setAttributes( { demoErrorMessage: ! demoErrorMessage } ) }
					/>
					</ToolsPanelItem>
					<ToolsPanelItem
						hasValue={ () => !! successMessageText && successMessageText !== 'Login successful! Redirecting...' }
						label={ __( 'Success Message Text', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( { successMessageText: 'Login successful! Redirecting...' } ) }
						isShownByDefault
					>
						<TextControl
							__next40pxDefaultSize
							__nextHasNoMarginBottom
							label={ __( 'Success Message Text', 'spectra-pro' ) }
							value={ successMessageText }
							onChange={ ( value ) => setAttributes( { successMessageText: value } ) }
						/>
					</ToolsPanelItem>
					<ToolsPanelItem
						hasValue={ () => !! errorMessageText && errorMessageText !== 'Login failed. Please check your credentials.' }
						label={ __( 'Error Message Text', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( { errorMessageText: 'Login failed. Please check your credentials.' } ) }
						isShownByDefault
					>
						<TextControl
							__next40pxDefaultSize
							__nextHasNoMarginBottom
							label={ __( 'Error Message Text', 'spectra-pro' ) }
							value={ errorMessageText }
							onChange={ ( value ) => setAttributes( { errorMessageText: value } ) }
						/>
					</ToolsPanelItem>
				</ToolsPanel>
				<ToolsPanel
					label={ __( 'Redirects', 'spectra-pro' ) }
					resetAll={ resetAllRedirectSettings }
					panelId={ clientId }
				>
					<ToolsPanelItem
						hasValue={ () => enableLoggedInMessage !== true }
						label={ __( 'Logged in Message', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( {
							enableLoggedInMessage: true,
						} ) }
						isShownByDefault
					>
						<ToggleControl
							__nextHasNoMarginBottom
							checked={ enableLoggedInMessage }
							label={ __( 'Show Logged In Message', 'spectra-pro' ) }
							onChange={ () => setAttributes( { enableLoggedInMessage: ! enableLoggedInMessage } ) }
							help = { __ ( 'The "Logged In Message" will be shown instead of this block on the frontend when the user visiting this page is already Logged In.','spectra-pro' ) }
						/>
					</ToolsPanelItem>
					<ToolsPanelItem
						hasValue={ () => !! redirectAfterLoginURL }
						label={ __( 'Redirect URL after Login', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( {
							redirectAfterLoginURL: undefined,
						} ) }
						resetAll={ () => ( {
							redirectAfterLoginURL: undefined,
						} ) }
						isShownByDefault
					>
						<LinkControl
							__nextHasNoMarginBottom
							searchInputPlaceholder={__( 'Enter redirect URL after login…', 'spectra-pro' )}
							value={redirectAfterLoginURL}
							onChange={ ( link ) => setAttributes( { redirectAfterLoginURL: link } ) }
							withCreateSuggestion={true}
							onRemove={() => setAttributes( { redirectAfterLoginURL: undefined } )}
						/>
						<p className="components-base-control__help">{ __( 'Default redirect URL is homepage', 'spectra-pro' ) }</p>
					</ToolsPanelItem>
					<ToolsPanelItem
						hasValue={ () => !! redirectAfterLogoutURL }
						label={ __( 'Redirect URL after Logout', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( {
							redirectAfterLogoutURL: undefined,
						} ) }
						resetAll={ () => ( {
							redirectAfterLogoutURL: undefined,
						} ) }
						isShownByDefault
					>
						<LinkControl
							__nextHasNoMarginBottom
							searchInputPlaceholder={__( 'Enter redirect URL after logout…', 'spectra-pro' )}
							value={redirectAfterLogoutURL}
							onChange={ ( link ) => setAttributes( { redirectAfterLogoutURL: link } ) }
							withCreateSuggestion={true}
							onRemove={() => setAttributes( { redirectAfterLogoutURL: undefined } )}
						/>
						<p className="components-base-control__help">{ __( 'Default redirect URL is homepage', 'spectra-pro' ) }</p>
					</ToolsPanelItem>
				</ToolsPanel>
				<ToolsPanel
					label={ __( 'Google ReCAPTCHA', 'spectra-pro' ) }
					resetAll={ resetAllReCaptchaSettings }
					panelId={ clientId }
				>
					<ToolsPanelItem
						hasValue={ () => enableRecaptcha !== false }
						label={ __( 'Enable ReCAPTCHA', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( {
							enableRecaptcha: false,
						} ) }
						isShownByDefault
					>
						<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
								checked={ enableRecaptcha }
								label={ __( 'Enable ReCAPTCHA', 'spectra-pro' ) }
								onChange={ () => setAttributes( { enableRecaptcha: ! enableRecaptcha } ) }
							/>

							{ enableRecaptcha && (
								<>
									<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={ recaptchaVersion }
										onChange={ ( value ) => setAttributes( { recaptchaVersion: value } ) }
									>
										<ToggleGroupControlOption value="v2" label="v2" />
										<ToggleGroupControlOption value="v3" label="v3" />
									</ToggleGroupControl>
								</>
							) }
						</VStack>
					</ToolsPanelItem>
				</ToolsPanel>
			</InspectorControls>
		</>
	);
} );


/**
 * Element Sub-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 = {},
		style
    } = 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,
					style
				} }
			/>
		</InspectorControls>
    );
} );

/**
 * 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 settings.
 */
const ColorSettings = memo( ( props ) => {

	// Destructure the required props.
	const {
		clientId,
		setAttributes,
		attributes: {
			backgroundColor,
			backgroundGradient,
			backgroundColorHover,
			backgroundGradientHover,
			// Child block colors now handled by individual child blocks
			labelColor,
			labelColorHover,
			inputTextColor,
			inputTextColorHover,
			inputBgColor,
			inputBgColorHover,
			inputPlaceholderColor,
			inputPlaceholderColorHover,
			iconColor,
			linkColor,
			linkColorHover
		},
	} = props;

	return (
		<>
			{/* Container-level colors */}
			<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,
						} ),
					}
				] }
				panelId={ clientId }
			/>
			
			{/* Form element colors - provided as context defaults to child blocks */}
			<InspectorColor
				settings={ [
					{
						colorValue: labelColor,
						label: __( 'Label Color', 'spectra-pro' ),
						onColorChange: ( value ) => setAttributes( { labelColor: value } ),
						resetAllFilter: () => setAttributes( { labelColor: undefined } ),
						help: __( 'Default color for form labels. Can be overridden by individual label blocks.', 'spectra-pro' ),
					},
					{
						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 } ),
						help: __( 'Default text color for form inputs. Can be overridden by individual input blocks.', 'spectra-pro' ),
					},
					{
						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 } ),
					},
					{
						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 login 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 );