/**
 * External dependencies.
 */
import { __ } from '@wordpress/i18n';
import {
	useBlockProps,
	InnerBlocks,
	store as blockEditorStore,
} from '@wordpress/block-editor';
import { memo, useMemo } from '@wordpress/element';
import { useSelect } from '@wordpress/data';

/**
 * Internal dependencies.
 */

/**
 * The Editor Block render.
 *
 * @param {Object} props The element props.
 * @since 2.0.0
 * @return {Element} The rendered block.
 */
const Render = ( props ) => {
	const {
		clientId,
		context: {
			'spectra-pro/form/formId': formId,
			'spectra-pro/form/formType': formType,
			'spectra-pro/form/overallAlignment': overallAlignment,
			'spectra-pro/form/showIcons': showIcons,
		},
		attributes,
	} = props;

	// Use useSelect hook for better performance instead of direct select() call
	const { hasChildBlocks } = useSelect( ( select ) => {
		const { getBlockOrder } = select( blockEditorStore );
		return {
			hasChildBlocks: getBlockOrder( clientId ).length > 0,
		};
	}, [ clientId ] );

	// Basic styles without useSpectraStyles hook for now
	const style = {};

	// Use the block props, with the added CSS variables and their related classes.
	const blockProps = useBlockProps( {
		'style': {
			...style,
			textAlign: overallAlignment || 'left'
		},
		'className': `spectra-pro-form-wrapper spectra-pro-form-wrapper--${attributes.wrapperType || 'form'}`,
		'data-form-id': formId || 'login-form',
		'data-form-type': formType || 'login',
	} );

	// Template for form structure - input wrapper -> label + (icon) + input
	const formTemplate = useMemo( () => {
		
		// Helper function to create field template with optional icon
		const createFieldTemplate = ( fieldType, labelText, placeholder, inputType = 'text', extraProps = {} ) => {
			const fieldChildren = [
				[ 'spectra-pro/form-input-label', {
					text: labelText,
					fieldType
				} ]
			];

			// Add icon if showIcons is enabled (default to true if undefined)
			const shouldShowIcon = showIcons !== false;
			
			if ( shouldShowIcon ) {
				// Determine icon based on field type without nested ternary
				let iconName = 'mail'; // default
				if ( fieldType === 'username' ) {
					iconName = 'user';
				} else if ( fieldType === 'password' ) {
					iconName = 'lock';
				}

				fieldChildren.push( [ 'spectra-pro/form-icon', {
					icon: iconName,
					fieldType
				} ] );
			}

			// Add input field
			fieldChildren.push( [ 'spectra-pro/form-input-field', {
				inputType,
				placeholder,
				fieldType,
				...extraProps
			} ] );

			return [ 'spectra-pro/form-input-wrapper', {
				fieldType
			}, fieldChildren ];
		};

		return [
			createFieldTemplate( 'username', __( 'Username or Email', 'spectra-pro' ), __( 'Enter your username or email', 'spectra-pro' ), 'text' ),
			createFieldTemplate( 'password', __( 'Password', 'spectra-pro' ), __( 'Enter your password', 'spectra-pro' ), 'password', { showPasswordToggle: true } ),
			[ 'spectra-pro/form-checkbox', {
				text: __( 'Remember Me', 'spectra-pro' ),
				fieldType: 'remember'
			} ],
			[ 'spectra-pro/form-button', {
				text: __( 'Log In', 'spectra-pro' ),
				buttonType: 'submit'
			} ],
			[ 'spectra-pro/form-link', {
				text: __( 'Forgot Password', 'spectra-pro' ),
				linkType: 'forgot-password'
			} ],
			[ 'spectra-pro/form-link', {
				text: __( "Don't have an account? Register", 'spectra-pro' ),
				linkType: 'register'
			} ],
			[ 'spectra-pro/form-message', {
				messageType: 'success'
			} ],
			[ 'spectra-pro/form-message', {
				messageType: 'error'
			} ],
			[ 'spectra-pro/form-recaptcha' ]
		];
	}, [ showIcons ] );

	// Note: On the front-end this element will be a form. In the editor it needs to be a div.
	return (
		<div { ...blockProps }>
			<InnerBlocks
				template={ formTemplate }
				orientation="vertical"
				allowedBlocks={ [
					'spectra-pro/form-input-wrapper',
					'spectra-pro/form-field-wrapper',
					'spectra-pro/form-input-field',
					'spectra-pro/form-input-label',
					'spectra-pro/form-checkbox',
					'spectra-pro/form-button',
					'spectra-pro/form-link',
					'spectra-pro/form-message',
					'spectra-pro/form-recaptcha',
					'spectra-pro/form-icon'
				] }
				renderAppender={ hasChildBlocks ? undefined : InnerBlocks.ButtonBlockAppender }
			/>
		</div>
	);
};

export default memo( Render );