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

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

/**
 * The Editor Block render for Form Link.
 *
 * @param {Object} props The element props.
 * @since 2.0.0
 * @return {Element} The rendered block.
 */
const Render = ( props ) => {
	const {
		attributes: {
			linkType = 'forgot_password'
		},
		context
	} = props;

	// Get form context
	const blockId = context['spectra-pro/form/block_id'] || 'preview';

	// Check if this link should be shown based on parent context
	const showForgotPassword = context['spectra-pro/form/showForgotPassword'] ?? true;
	const showRegisterLink = context['spectra-pro/form/showRegisterLink'] ?? true;

	// Get link text from parent context based on link type
	let linkText = '';

	switch ( linkType ) {
		case 'forgot_password':
			linkText = context['spectra-pro/form/forgotPasswordText'] || __( 'Forgot Password', 'spectra-pro' );
			break;
		case 'register_info':
			linkText = context['spectra-pro/form/registerLinkText'] || __( 'Register', 'spectra-pro' );
			break;
		case 'login_info':
			linkText = __( 'Already have an account? Login', 'spectra-pro' );
			break;
		default:
			linkText = __( 'Link', 'spectra-pro' );
			break;
	}

	// Get parent color context
	const parentLinkColor = context?.['spectra-pro/form/linkColor'];
	const parentLinkColorHover = context?.['spectra-pro/form/linkColorHover'];

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

	// Merge local attributes with context values for useSpectraStyles
	const mergedAttributes = {
		...props.attributes,
		textColor: props.attributes.textColor || parentLinkColor,
		textColorHover: props.attributes.textColorHover || parentLinkColorHover
	};

	// Custom class names - simplified following WordPress patterns
	const customClassNames = [
		`spectra-form-link--${linkType}`
	].filter( Boolean );

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

	// Use the block props
	const blockProps = useBlockProps( {
		className: classNames,
		style
	} );

	// Generate link ID for accessibility
	const linkId = `link-${linkType}-${blockId}`;

	// Check if link should be hidden (after hooks to follow React rules)
	if ( linkType === 'forgot_password' && ! showForgotPassword ) {
		return null;
	}

	if ( linkType === 'register_info' && ! showRegisterLink ) {
		return null;
	}

	return (
		<div { ...blockProps }>
			<div className="spectra-pro-form-link__wrapper">
				{ /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }
				<a
					href="#"
					id={ linkId }
					className="spectra-pro-form-link__link"
					role="button"
					onClick={ ( e ) => e.preventDefault() } // Prevent navigation in editor
				>
					<span className="spectra-pro-form-link__text">
						{ linkText }
					</span>
				</a>
			</div>
		</div>
	);
};

export default memo( Render );