import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Fix } from '../../shared/api/types/fixes';
import { useFixActions } from '../../shared/fixes/useFixActions';
import { Button } from '../../shared/ui/Button';
import { Icon } from '../../shared/ui/Icon';
import { useCloseOverlay } from '../../shared/ui/overlayClose';
import { useAutofocus } from '../../shared/ui/useAutofocus';
import { doneText, doneTitle, stoppedText } from './fixAllTexts';
import { FIX_ALL_TITLE_ID } from './fixAllTitle';

export function DoneStep( { fix }: { fix: Fix } ): JSX.Element {
	const closeOverlay = useCloseOverlay();
	const { undo } = useFixActions();
	const autofocus = useAutofocus< HTMLButtonElement >();
	const wasStopped = fix.state === 'running';

	return (
		<>
			<span className="done-mark">
				<Icon name="check" />
			</span>
			<div className="sec">
				<h2 id={ FIX_ALL_TITLE_ID }>{ doneTitle( fix ) }</h2>
				<p className="muted">
					{ doneText( fix ) }
					{ wasStopped && ` ${ stoppedText( fix ) }` }
				</p>
			</div>
			<div className="modal-actions">
				<Button
					icon="undo"
					onClick={ () => {
						closeOverlay();
						void undo( fix );
					} }
				>
					{ __( 'Undo', 'aiplaz-link-checkup' ) }
				</Button>
				<Button
					{ ...autofocus }
					variant="primary"
					onClick={ closeOverlay }
				>
					{ __( 'Done', 'aiplaz-link-checkup' ) }
				</Button>
			</div>
		</>
	);
}