/**
 * External dependencies.
 */
import { InspectorControls } from '@wordpress/block-editor';
import {
	__experimentalToolsPanel as ToolsPanel,
	__experimentalToolsPanelItem as ToolsPanelItem,
	TextControl,
} from '@wordpress/components';
import { memo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies.
 */
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 BlockSettings = memo( ( props ) => {
	// Destructure the required props.
	const {
		clientId,
		setAttributes,
		attributes: { placeholder },
	} = props;

	const defaultPlaceholder = __( 'Search', 'spectra-pro' );
	return (
		<InspectorControls group="settings">
			<ToolsPanel
				label={ __( 'General', 'spectra-pro' ) }
				resetAll={ () => {} }
				panelId={ clientId }
			>
				<ToolsPanelItem
					hasValue={ () =>
						!! placeholder && defaultPlaceholder !== placeholder
					}
					label={ __( 'Placeholder', 'spectra-pro' ) }
					onDeselect={ () =>
						setAttributes( { placeholder: defaultPlaceholder } )
					}
					resetAllFilter={ () => ( {
						placeholder: defaultPlaceholder,
					} ) }
					isShownByDefault
				>
					<TextControl
						__next40pxDefaultSize
						__nextHasNoMarginBottom
						label={ __( 'Placeholder', 'spectra-pro' ) }
						value={ placeholder }
						onChange={ ( value ) => {
							setAttributes( { placeholder: value } );
						} }
					/>
				</ToolsPanelItem>
			</ToolsPanel>
		</InspectorControls>
	);
} );

/**
 * The color settings.
 *
 * @since x.x.x
 *
 * @param {Object} props The element props.
 * @return {Element} The rendered settings.
 */
const ColorSettings = memo( ( props ) => {
	const {
		clientId,
		setAttributes,
		attributes: {
			textColorFocus,
			backgroundColorFocus,
			backgroundGradientFocus,
			textColorSecondary,
			textColorFocusSecondary,
		},
	} = props;

	return (
		<InspectorColor
			settings={ [
				{
					colorValue: textColorFocus,
					label: __( 'Text Focus', 'spectra-pro' ),
					onColorChange: ( value ) =>
						setAttributes( { textColorFocus: value } ),
					resetAllFilter: () =>
						setAttributes( { textColorFocus: undefined } ),
				},
				{
					colorValue: textColorSecondary,
					label: __( 'Placeholder', 'spectra-pro' ),
					onColorChange: ( value ) =>
						setAttributes( { textColorSecondary: value } ),
					resetAllFilter: () =>
						setAttributes( { textColorSecondary: undefined } ),
				},
				{
					colorValue: textColorFocusSecondary,
					label: __( 'Placeholder Focus', 'spectra-pro' ),
					onColorChange: ( value ) =>
						setAttributes( { textColorFocusSecondary: value } ),
					resetAllFilter: () =>
						setAttributes( { textColorFocusSecondary: undefined } ),
				},
				{
					colorValue: backgroundColorFocus,
					gradientValue: backgroundGradientFocus,
					label: __( 'Background Focus', 'spectra-pro' ),
					onColorChange: ( value ) =>
						setAttributes( { backgroundColorFocus: value } ),
					onGradientChange: ( value ) =>
						setAttributes( { backgroundGradientFocus: value } ),
					resetAllFilter: () =>
						setAttributes( {
							backgroundColorFocus: undefined,
							backgroundGradientFocus: undefined,
						} ),
				},
			] }
			panelId={ clientId }
		/>
	);
} );

/**
 * The Editor settings.
 *
 * @param {Object} props The element props.
 * @since x.x.x
 * @return {Element} The rendered settings.
 */
const Settings = ( props ) => (
	<>
		<BlockSettings { ...{ ...props } } />
		<ColorSettings { ...{ ...props } } />
	</>
);

export default memo( Settings );
