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

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

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

	const {
		labelText,
		isRequired,
		requiredIndicator,
		hideLabel,
		htmlFor,
		textColor,
		textColorHover
	} = attributes;

	// Get context values for inheritance
	const contextLabelText = context?.['spectra-pro/form-input/fieldLabel'];
	const contextIsRequired = context?.['spectra-pro/form-input/isRequired'] || isRequired;
	const contextFieldType = context?.['spectra-pro/form-input/fieldType'];
	const showLabels = context?.['spectra-pro/form/showLabels'];
	
	// Get parent color context
	const parentLabelColor = context?.['spectra-pro/form/labelColor'];
	const parentLabelColorHover = context?.['spectra-pro/form/labelColorHover'];

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

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

	// Custom class names - simplified following WordPress patterns
	const customClassNames = [
		`spectra-form-input-label--${contextFieldType || 'text'}`
	].filter( Boolean );

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

	// Build the htmlFor attribute - will be used for label association
	const forAttribute = htmlFor || `field-${contextFieldType || 'input'}`;

	// Use the block props
	const blockProps = useBlockProps( {
		className: classNames,
		style,
		htmlFor: forAttribute,
		id: `label-${forAttribute}`, // Add ID for accessibility
	} );

	// Don't render if labels are disabled globally or locally (check after hooks)
	if ( hideLabel || showLabels === false ) {
		return null;
	}

	return (
		// eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for
		<label { ...blockProps }>
			<RichText
				identifier="labelText"
				tagName="span"
				value={labelText}
				onChange={( value ) => props.setAttributes( { labelText: value } )}
				placeholder={contextLabelText}
				allowedFormats={[]}
				withoutInteractiveFormatting
				disableLineBreaks
			/>
			{( contextIsRequired || isRequired ) && (
				<span className="spectra-pro-form-input-label__required">
					{requiredIndicator || '*'}
				</span>
			)}
		</label>
	);
};

export default memo( Render );