/**
 * WordPress dependencies
 */
import { SelectControl } from '@safe-wordpress/components';
import type { BlockEditProps } from '@safe-wordpress/blocks';

/**
 * Internal dependencies
 */
import { isOptionGroup } from '../utils';
import type { Attributes, OptionItem } from '../types';

export const SelectPreview = (
	props: BlockEditProps< Attributes >
): JSX.Element => {
	const { attributes, setAttributes } = props;
	const { disabled, options, placeholder } = attributes;
	const plainOptions = options.reduce(
		( acc, current ) =>
			isOptionGroup( current )
				? [ ...acc, ...current.options ]
				: [ ...acc, current ],
		[] as OptionItem[]
	);
	const selectedItem = plainOptions.find( ( o ) => o.selected );

	const onChangeSelectedOption = ( selectedValue: string ) =>
		setAttributes( {
			options: options.map( ( o ) => {
				if ( isOptionGroup( o ) ) {
					return {
						...o,
						options: o.options.map( ( io ) =>
							io.value === selectedValue
								? { ...io, selected: true }
								: { ...io, selected: false }
						),
					};
				} //end if

				return ( o.value || o.label ) === selectedValue
					? { ...o, selected: true }
					: { ...o, selected: false };
			} ),
		} );

	return (
		// @ts-expect-error Options property is not mandatory
		<SelectControl
			value={
				! selectedItem
					? 'nelio-forms-default'
					: selectedItem.value || selectedItem.label
			}
			disabled={ disabled }
			onChange={ ( selectedValue ) =>
				onChangeSelectedOption( selectedValue )
			}
		>
			{ ! selectedItem && (
				<option hidden disabled value="nelio-forms-default">
					{ placeholder }
				</option>
			) }
			{ options.map( ( item, index ) =>
				isOptionGroup( item ) ? (
					<optgroup
						key={ index }
						label={ item.label }
						disabled={ item.disabled }
					>
						{ item.options.map( ( innerOption, innerIndex ) => (
							<option
								key={ innerIndex }
								disabled={ innerOption.disabled }
								value={ innerOption.value }
							>
								{ innerOption.label || innerOption.label }
							</option>
						) ) }
					</optgroup>
				) : (
					<option
						key={ index }
						disabled={ item.disabled }
						value={ item.value || item.label }
					>
						{ item.label }
					</option>
				)
			) }
		</SelectControl>
	);
};