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

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

/**
 * The Editor Block render.
 *
 * @since x.x.x
 *
 * @param {Object} props The element props.
 * @return {Element} The rendered block.
 */
const Render = ( props ) => {
	const {
		context: { 'spectra-pro/loop-builder-child-filter/filterType': filterType },
		attributes,
	} = props;

	const { layoutType = 'stack' } = attributes;

	// Validate layoutType to ensure it's only 'stack' or 'inline'.
	const validatedLayoutType = [ 'stack', 'inline' ].includes( layoutType ) ? layoutType : 'stack';

	// Configuration for the useSpectraStyles hook.
	const config = [
		{ key: 'textColor' },
		{ key: 'textColorHover' },
		{ key: 'backgroundColor' },
		{ key: 'backgroundColorHover' },
		{ key: 'backgroundGradient' },
		{ key: 'backgroundGradientHover' },
		{ key: 'checkboxSize' },
		{ key: 'itemsGap' },
		{ key: 'labelCheckboxGap' },
	];

	// Additional classes.
	const additionalClasses = [ 'checkbox' !== filterType && 'is-hidden', `is-layout-${ validatedLayoutType }` ];

	// Generate styles and class names.
	const { style, classNames } = useSpectraStyles( attributes, config, additionalClasses );

	// Use the block props, with the added CSS variables and their related classes.
	const blockProps = useBlockProps( {
		className: spectraClassNames( classNames ),
		style,
	} );

	return (
		<div { ...blockProps }>
			<label htmlFor="option1">
				<input type="checkbox" id="option1" aria-label="Option 1" />
				{ __( 'Option 1', 'spectra-pro' ) }
			</label>
			<label htmlFor="option2">
				<input type="checkbox" id="option2" aria-label="Option 2" />
				{ __( 'Option 2', 'spectra-pro' ) }
			</label>
			<label htmlFor="option3">
				<input type="checkbox" id="option3" aria-label="Option 3" />
				{ __( 'Option 3', 'spectra-pro' ) }
			</label>
		</div>
	);
};

export default memo( Render );
