import { useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Status } from '../../shared/api/types/status';
import { boot } from '../../shared/lib/boot';
import { looksValid } from '../../shared/lib/url';
import { placesPhrase } from '../../shared/text/countedPhrases';
import { Button } from '../../shared/ui/Button';
import { useCloseOverlay } from '../../shared/ui/overlayClose';
import { useAutofocus } from '../../shared/ui/useAutofocus';
import { BrokenLinkChoices } from './BrokenLinkChoices';
import type { BrokenLinkChoice } from './brokenLinkOptions';
import { FixAllPromises } from './FixAllPromises';
import { chooseTitle, startLabel, type FixAllMode } from './fixAllTexts';
import { FIX_ALL_TITLE_ID } from './fixAllTitle';
import { fixAllRequestOf, type FixAllRequest } from './fixAllRequest';

type ChooseStepProps = {
	mode: FixAllMode;
	status: Status;
	onStart: ( request: FixAllRequest ) => void;
};

export function ChooseStep( {
	mode,
	status,
	onStart,
}: ChooseStepProps ): JSX.Element {
	const closeOverlay = useCloseOverlay();
	const autofocus = useAutofocus< HTMLButtonElement >();
	const [ choice, setChoice ] = useState< BrokenLinkChoice >( 'remove' );
	const [ address, setAddress ] = useState( boot.siteUrl );
	const isMoved = mode === 'moved';
	const count = status.counts[ mode ];
	const isReady = isMoved || choice !== 'replace' || looksValid( address );

	return (
		<>
			<div className="sec">
				<h2 id={ FIX_ALL_TITLE_ID }>{ chooseTitle( mode, count ) }</h2>
				<p className="muted">
					{ sprintf(
						/* translators: %s: number of places, for example "26 places" */
						__(
							'This changes %s in your posts and pages.',
							'aiplaz-link-checkup'
						),
						placesPhrase( status.places[ mode ] )
					) }
				</p>
			</div>
			{ isMoved ? (
				<p>
					{ __(
						'Each link is changed to the address it leads to now.',
						'aiplaz-link-checkup'
					) }
				</p>
			) : (
				<BrokenLinkChoices
					choice={ choice }
					address={ address }
					onChoose={ setChoice }
					onAddressChange={ setAddress }
				/>
			) }
			<FixAllPromises />
			<div className="modal-actions">
				<Button variant="quiet" onClick={ closeOverlay }>
					{ __( 'Cancel', 'aiplaz-link-checkup' ) }
				</Button>
				<Button
					{ ...autofocus }
					variant="primary"
					disabled={ ! isReady }
					onClick={ () => {
						onStart( fixAllRequestOf( mode, choice, address ) );
					} }
				>
					{ startLabel( mode, count ) }
				</Button>
			</div>
		</>
	);
}