import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Fix } from '../../shared/api/types/fixes';
import { linksProgressPhrase } from '../../shared/text/countedPhrases';
import { Button } from '../../shared/ui/Button';
import { Progress } from '../../shared/ui/Progress';
import type { FixAllMode } from './fixAllTexts';
import { FIX_ALL_TITLE_ID } from './fixAllTitle';

const MINIMUM_PROGRESS_MAX = 1;

type RunningStepProps = {
	mode: FixAllMode;
	fix: Fix | null;
	onStop: () => void;
};

export function RunningStep( {
	mode,
	fix,
	onStop,
}: RunningStepProps ): JSX.Element {
	const linksTotal = fix?.links_total ?? 0;
	const linksDone = fix?.links_done ?? 0;

	return (
		<>
			<div className="sec">
				<h2 id={ FIX_ALL_TITLE_ID }>
					{ mode === 'moved'
						? __( 'Updating links', 'aiplaz-link-checkup' )
						: __( 'Fixing links', 'aiplaz-link-checkup' ) }
				</h2>
				<p className="muted">
					{ __(
						'Working in small steps so your database stays fast.',
						'aiplaz-link-checkup'
					) }
				</p>
			</div>
			<Progress
				label={ __( 'Progress', 'aiplaz-link-checkup' ) }
				value={ linksDone }
				max={ Math.max( linksTotal, MINIMUM_PROGRESS_MAX ) }
			/>
			<div className="progress-meta num">
				<span>{ linksProgressPhrase( linksDone, linksTotal ) }</span>
				<span>{ __( 'Revisions saved', 'aiplaz-link-checkup' ) }</span>
			</div>
			<div className="modal-actions">
				<Button variant="quiet" onClick={ onStop }>
					{ __( 'Stop', 'aiplaz-link-checkup' ) }
				</Button>
			</div>
		</>
	);
}