/**
 * 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 Checkbox.
 *
 * @param {Object} props The element props.
 * @since 2.0.0
 * @return {Element} The rendered block.
 */
const Render = ( props ) => {
	const {
		attributes: {
			checkboxType,
			checkboxLabel,
			checkboxValue,
			isRequired,
			hideLabel
		},
		context,
		setAttributes
	} = props;

	// Get context values from parent form - use own label for terms and conditions
	const contextLabel = checkboxLabel;
	const contextValue = checkboxValue; // Use block's own value
	const contextRequired = isRequired; // Use block's own value
	const contextHideLabel = hideLabel; // Use block's own value  
	const contextCheckboxType = checkboxType || 'terms';
	const blockId = context?.['spectra-pro/form/formId'] || 'preview';

	// Get parent color context
	const parentTextColorHover = context?.['spectra-pro/form/textColorHover'];
	const parentCheckboxBgColor = context?.['spectra-pro/form/checkboxBackgroundColor'];

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

	// Merge local attributes with context values for useSpectraStyles
	const mergedAttributes = {
		...props.attributes,
		textColorHover: props.attributes.textColorHover || parentTextColorHover,
		checkboxBackgroundColor: props.attributes.checkboxBackgroundColor || parentCheckboxBgColor
	};

	// Custom class names - simplified following WordPress patterns
	const customClassNames = [
		`spectra-form-checkbox--${contextCheckboxType}`
	].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 unique IDs for accessibility
	const checkboxId = `checkbox-${contextCheckboxType}-${blockId}`;
	const labelId = `label-${contextCheckboxType}-${blockId}`;

	// Terms and conditions block always renders

	return (
		<div { ...blockProps }>
			<div className="spectra-pro-form-checkbox__wrapper">
				<label 
					htmlFor={ checkboxId }
					id={ labelId }
					className="spectra-pro-form-checkbox__label"
				>
					<input
						type="checkbox"
						id={ checkboxId }
						name={ contextCheckboxType }
						className="spectra-pro-form-checkbox__input"
						checked={ contextValue }
						required={ contextRequired }
						aria-describedby={ !contextHideLabel ? labelId : undefined }
						onChange={ () => {
							// In editor, toggle for preview
							setAttributes( { checkboxValue: !contextValue } );
						} }
					/>
					<span className="spectra-pro-form-checkbox__checkmark"></span>
					{ !contextHideLabel && (
						<span className="spectra-pro-form-checkbox__text">
							{ contextLabel }
							{ contextRequired && (
								<span 
									className="spectra-pro-form-checkbox__required"
									aria-label={ __( 'required', 'spectra-pro' ) }
								>
									*
								</span>
							) }
						</span>
					) }
				</label>
			</div>
		</div>
	);
};

export default memo( Render );