import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import { Button } from '../../shared/ui/Button';
import { useAutofocus } from '../../shared/ui/useAutofocus';

const ADDRESS_FIELD_ID = 'lcu-new-url';
const REDIRECT_PLACEHOLDER = '/new-page/';
const ADDRESS_PLACEHOLDER = 'https://';

type AddressFieldProps = {
	isRedirect: boolean;
	address: string;
	isChecking: boolean;
	onType: ( typedAddress: string ) => void;
	onTest: () => void;
};

export function AddressField( {
	isRedirect,
	address,
	isChecking,
	onType,
	onTest,
}: AddressFieldProps ): JSX.Element {
	const autofocus = useAutofocus< HTMLInputElement >();

	return (
		<div className="field">
			<label htmlFor={ ADDRESS_FIELD_ID }>
				{ isRedirect
					? __( 'Send visitors to', 'aiplaz-link-checkup' )
					: __( 'New address', 'aiplaz-link-checkup' ) }
			</label>
			<div className="inline">
				<input
					{ ...autofocus }
					className="input"
					id={ ADDRESS_FIELD_ID }
					type="url"
					inputMode="url"
					autoComplete="off"
					spellCheck={ false }
					placeholder={
						isRedirect ? REDIRECT_PLACEHOLDER : ADDRESS_PLACEHOLDER
					}
					value={ address }
					onChange={ ( event ) => {
						onType( event.target.value );
					} }
					onKeyDown={ ( event ) => {
						if ( event.key === 'Enter' ) {
							onTest();
						}
					} }
				/>
				<Button disabled={ isChecking } onClick={ onTest }>
					{ __( 'Test', 'aiplaz-link-checkup' ) }
				</Button>
			</div>
		</div>
	);
}