/**
 * WordPress dependencies
 */
import { useEffect, useRef } from '@safe-wordpress/element';
import { TextControl } from '@safe-wordpress/components';
import { _x } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import type { KeyboardEventHandler } from 'react';

export type OptionLabelProps = {
	readonly className: string;
	readonly label: string;
	readonly onChange: ( label: string ) => void;
	readonly placeholder?: string;
	readonly onKeyDown?: KeyboardEventHandler< HTMLInputElement >;
	readonly onFocus?: () => void;
	readonly isInFocus?: boolean;
};

export const OptionLabel = ( {
	className,
	label,
	onChange,
	placeholder,
	onFocus,
	onKeyDown,
	isInFocus,
}: OptionLabelProps ): JSX.Element => {
	const ref = useRef( null );

	useEffect( () => {
		if ( isInFocus && ref && ref.current ) {
			( ref.current as HTMLElement ).focus();
		} //end if
	}, [ isInFocus ] );

	return (
		<TextControl
			type="text"
			ref={ ref }
			className={ className }
			placeholder={
				placeholder ?? _x( 'Type label here…', 'user', 'nelio-forms' )
			}
			value={ label }
			onChange={ onChange }
			onFocus={ onFocus }
			onKeyDown={ onKeyDown }
		/>
	);
};