/**
 * 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: 'textColorHover' },
		{ key: 'backgroundColor' },
		{ key: 'backgroundColorHover' },
		{ key: 'backgroundGradient' },
		{ key: 'backgroundGradientHover' },
	];

	// 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 }>
			<select
				style={ {
					...borderProps.style,
					...spacingProps.style,
					...shadowProps.style,
				} }
			>
				{ placeholder && (
					<option value="" disabled selected>
						{ placeholder }
					</option>
				) }
				<option value="">{ __( 'Default', 'spectra-pro' ) }</option>
				<option value="option1">{ __( 'Option 1', 'spectra-pro' ) }</option>
				<option value="option2">{ __( 'Option 2', 'spectra-pro' ) }</option>
				<option value="option3">{ __( 'Option 3', 'spectra-pro' ) }</option>
			</select>
		</div>
	);
};

export default memo( Render );
