import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import { brokenLinkOptions, type BrokenLinkChoice } from './brokenLinkOptions';

const CHOICE_GROUP_NAME = 'lcu-how';
const ALL_ADDRESS_FIELD_ID = 'lcu-all-url';

type BrokenLinkChoicesProps = {
	choice: BrokenLinkChoice;
	address: string;
	onChoose: ( choice: BrokenLinkChoice ) => void;
	onAddressChange: ( address: string ) => void;
};

export function BrokenLinkChoices( {
	choice,
	address,
	onChoose,
	onAddressChange,
}: BrokenLinkChoicesProps ): JSX.Element {
	return (
		<>
			<fieldset className="opts">
				<legend className="sr">
					{ __(
						'What should happen to the broken links',
						'aiplaz-link-checkup'
					) }
				</legend>
				{ brokenLinkOptions().map( ( option ) => (
					<label
						className="opt"
						key={ option.choice }
						htmlFor={ `${ CHOICE_GROUP_NAME }-${ option.choice }` }
						aria-label={ option.title }
					>
						<input
							type="radio"
							id={ `${ CHOICE_GROUP_NAME }-${ option.choice }` }
							name={ CHOICE_GROUP_NAME }
							value={ option.choice }
							aria-describedby={ `${ CHOICE_GROUP_NAME }-${ option.choice }-text` }
							checked={ choice === option.choice }
							onChange={ () => {
								onChoose( option.choice );
							} }
						/>
						<span>
							<b>{ option.title }</b>
							<span
								id={ `${ CHOICE_GROUP_NAME }-${ option.choice }-text` }
							>
								{ option.text }
							</span>
						</span>
					</label>
				) ) }
			</fieldset>
			{ choice === 'replace' && (
				<div className="field">
					<label htmlFor={ ALL_ADDRESS_FIELD_ID }>
						{ __(
							'Address for all of them',
							'aiplaz-link-checkup'
						) }
					</label>
					<input
						className="input"
						id={ ALL_ADDRESS_FIELD_ID }
						type="url"
						inputMode="url"
						autoComplete="off"
						spellCheck={ false }
						placeholder="https://"
						value={ address }
						onChange={ ( event ) => {
							onAddressChange( event.target.value );
						} }
					/>
				</div>
			) }
		</>
	);
}