/**
 * 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 = 'remember'
		},
		context
	} = props;

	// Get context values from parent form
	const blockId = context?.['spectra-pro/form/formId'] || 'preview';
	const showRememberMe = context?.['spectra-pro/form/showRememberMe'];

	// Get label text from parent context based on checkbox type
	let checkboxLabel = '';

	switch ( checkboxType ) {
		case 'remember':
			checkboxLabel = context?.['spectra-pro/form/rememberLabel'] || __( 'Remember Me', 'spectra-pro' );
			break;
		case 'terms':
			checkboxLabel = context?.['spectra-pro/form/termsLabel'] || __( 'I agree to the terms and conditions', 'spectra-pro' );
			break;
		case 'newsletter':
			checkboxLabel = context?.['spectra-pro/form/newsletterLabel'] || __( 'Subscribe to newsletter', 'spectra-pro' );
			break;
		default:
			checkboxLabel = __( 'Checkbox', 'spectra-pro' );
			break;
	}

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

	// 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' },
		{ key: 'labelColor', cssVar: '--spectra-label-color', className: 'spectra-label-color' },
		{ key: 'labelColorHover', cssVar: '--spectra-label-color-hover', className: 'spectra-label-color-hover' },
		{ key: 'checkboxBackgroundColor', cssVar: '--spectra-checkbox-background-color', className: 'spectra-checkbox-background-color' },
		{ key: 'checkboxColor', cssVar: '--spectra-checkbox-color', className: 'spectra-checkbox-color' },
		{ key: 'checkboxCheckmarkColor', cssVar: '--spectra-checkbox-checkmark-color', className: 'spectra-checkbox-checkmark-color' },
		{ key: 'checkboxBorderColor', cssVar: '--spectra-checkbox-border-color', className: 'spectra-checkbox-border-color' },
		{
			key: 'checkboxGlowColor',
			cssVar: '--spectra-checkbox-glow-color',
			className: 'spectra-checkbox-glow-color',
			process: ( value ) => {
				// Extract RGB values for rgba usage
				if ( value && value.includes( '#' ) ) {
					const hex = value.replace( '#', '' );
					const r = parseInt( hex.substring( 0, 2 ), 16 );
					const g = parseInt( hex.substring( 2, 4 ), 16 );
					const b = parseInt( hex.substring( 4, 6 ), 16 );
					return {
						'--spectra-checkbox-glow-color': value,
						'--spectra-checkbox-glow-color-rgb': `${r}, ${g}, ${b}`
					};
				}
				return { '--spectra-checkbox-glow-color': value };
			}
		}
	];

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

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

	// Don't render if showRememberMe is false and this is a remember me checkbox
	if ( checkboxType === 'remember' && showRememberMe === false ) {
		return null;
	}

	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={ checkboxType }
						className="spectra-pro-form-checkbox__input"
						aria-describedby={ labelId }
					/>
					<span className="spectra-pro-form-checkbox__checkmark"></span>
					<span className="spectra-pro-form-checkbox__text">
						{ checkboxLabel }
					</span>
				</label>
			</div>
		</div>
	);
};

export default memo( Render );