import { __, sprintf } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { FixAction } from '../../shared/api/types/fixes';
import { Button } from '../../shared/ui/Button';
import { Icon } from '../../shared/ui/Icon';
import type { FixPlan, PrimaryFix } from './fixPlan';

type FixPanelFootProps = {
	plan: FixPlan;
	primaryFix: PrimaryFix;
	placesText: string;
	isAddressValid: boolean;
	runningAction: FixAction | null;
	onRun: ( action: FixAction ) => void;
};

export function FixPanelFoot( {
	plan,
	primaryFix,
	placesText,
	isAddressValid,
	runningAction,
	onRun,
}: FixPanelFootProps ): JSX.Element {
	const isBusy = runningAction !== null;

	return (
		<div className="drawer-foot">
			<div className="actions">
				<Button
					variant="primary"
					icon={ primaryFix.icon }
					busy={ runningAction === primaryFix.action }
					disabled={
						isBusy || ( plan.needsAddress && ! isAddressValid )
					}
					onClick={ () => {
						onRun( primaryFix.action );
					} }
				>
					{ primaryFix.label }
				</Button>
				{ plan.isRedirect && (
					<Button
						busy={ runningAction === 'replace' }
						disabled={ isBusy || ! isAddressValid }
						onClick={ () => {
							onRun( 'replace' );
						} }
					>
						{ sprintf(
							/* translators: %s: number of places, for example "3 places" */
							__( 'Replace in %s', 'aiplaz-link-checkup' ),
							placesText
						) }
					</Button>
				) }
				{ plan.needsAddress && (
					<Button
						icon="unlink"
						busy={ runningAction === 'remove' }
						disabled={ isBusy }
						onClick={ () => {
							onRun( 'remove' );
						} }
					>
						{ __( 'Remove link', 'aiplaz-link-checkup' ) }
					</Button>
				) }
				<Button
					variant="quiet"
					busy={ runningAction === 'ignore' }
					disabled={ isBusy }
					onClick={ () => {
						onRun( 'ignore' );
					} }
				>
					{ __( 'Ignore', 'aiplaz-link-checkup' ) }
				</Button>
			</div>
			<div className="note">
				<Icon name="shield" />
				<span>
					{ __(
						'A revision of each post is saved first. Every fix is listed in History and can be undone.',
						'aiplaz-link-checkup'
					) }
				</span>
			</div>
		</div>
	);
}