/**
 * External dependencies.
 */
import { useBlockProps } from '@wordpress/block-editor';
import { memo } from '@wordpress/element';

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

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

	const {
		icon,
		fieldType,
		size,
		rotation,
		flipForRTL,
		linkURL,
		textColor,

	} = attributes;

	// Get context values from parent form
	const {
		'spectra-pro/form/showIcons': parentShowIcons,
		'spectra-pro/form/iconColor': iconColor,
		'spectra-pro/form-input/fieldType': contextFieldType,

	} = context || {};

	// Use context values as fallbacks
	const finalSize = size || '16px';
	const finalTextColor = textColor || iconColor;

	// Determine field type from attribute or context
	const finalFieldType = fieldType || contextFieldType;

	// Default icon mapping based on field type
	const getDefaultIcon = ( type ) => {
		const iconMap = {
			username: 'user',
			password: 'lock',
			email: 'envelope',
			first_name: 'user',
			last_name: 'user',
			confirm_password: 'lock'
		};
		return iconMap[type] || 'star';
	};

	// Use custom icon if provided, otherwise use default based on field type
	const finalIcon = icon || getDefaultIcon( finalFieldType );


	// Configuration for useSpectraStyles hook
	const config = [
		{ key: 'textColor', cssVar: '--spectra-icon-color', className: 'spectra-icon-color' },
	];

	// Merge local attributes with context values for useSpectraStyles
	const mergedAttributes = {
		...attributes,
		textColor: finalTextColor,
	};

	// Custom class names - simplified following WordPress patterns  
	const customClassNames = [].filter( Boolean );

	// Generate styles and class names using useSpectraStyles hook
	const { style: spectraStyle, classNames } = useSpectraStyles( mergedAttributes, config, customClassNames );

	// Additional styles for icon size
	const additionalStyle = {
		...spectraStyle,
		fontSize: finalSize,
		width: finalSize,
		height: finalSize
	};

	let WrapperTag = 'div';

	const blockPropsToUse = {
		style: additionalStyle,
		className: classNames,
	};

	if ( linkURL ) {
		WrapperTag = 'a';
		blockPropsToUse.href = 'JavaScript:void(0);';
	}

	// Use the block props, with the added CSS variables and their related classes.
	const blockProps = useBlockProps( blockPropsToUse );

	// Don't render if icons are disabled by parent (check after hooks to follow React rules)
	if ( parentShowIcons === false ) {
		return null;
	}

	return (
		<WrapperTag { ...blockProps }>
			<RenderSVG
				svg={ finalIcon }
				needsRTL={ flipForRTL }
				extraProps={ {
					width: finalSize,
					height: finalSize,
					style: {
						width: finalSize,
						height: finalSize,
						transform: rotation ? `rotate(${ rotation }deg)` : '',
					},
				} }
			/>
		</WrapperTag>
	);
};

export default memo( Render );
