/**
 * External dependencies
 */
import {
	useBlockProps,
	__experimentalUseBorderProps as useBorderProps,
	__experimentalGetShadowClassesAndStyles as useShadowProps,
	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
} from '@wordpress/block-editor';
import { memo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies.
 */
import { spectraClassNames } from '@spectra-helpers';
import { useSpectraStyles } from '@spectra-hooks';

/**
 * The Editor Block render.
 *
 * @since x.x.x
 *
 * @param {Object} props The element props.
 * @return {Element} The rendered block.
 */
const Render = ( props ) => {
	const { attributes } = props;

	const { placeholder } = attributes;

	// Configuration for the useSpectraStyles hook.
	const config = [
		{ key: 'textColor' },
		{ key: 'textColorFocus' },
		{ key: 'textColorSecondary' },
		{ key: 'textColorFocusSecondary' },
		{ key: 'backgroundColor' },
		{ key: 'backgroundColorFocus' },
		{ key: 'backgroundGradient' },
		{ key: 'backgroundGradientFocus' },
	];

	// Generate styles and class names.
	const { style, classNames } = useSpectraStyles( attributes, config );

	// Use the block props, with the added CSS variables and their related classes.
	const blockProps = useBlockProps( {
		className: spectraClassNames( classNames ),
		style,
	} );

	// Border props.
	const borderProps = useBorderProps( attributes );

	// Shadow props.
	const shadowProps = useShadowProps( attributes );

	// Spacing props.
	const spacingProps = useSpacingProps( attributes );

	return (
		<div { ...blockProps }>
			<input
				type="search"
				className="search-input"
				placeholder={ placeholder || __( 'Search', 'spectra-pro' ) }
				aria-label="Search input"
				style={ {
					...borderProps.style,
					...spacingProps.style,
					...shadowProps.style,
				} }
			/>
		</div>
	);
};

export default memo( Render );
