import { useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import type { JSX } from 'react';
import { useFixActions } from '../../shared/fixes/useFixActions';
import { linksPhrase } from '../../shared/text/countedPhrases';
import { Button } from '../../shared/ui/Button';
import type { LinkSelection } from './useLinkSelection';

type BulkAction = 'remove' | 'ignore';

export function BulkBar( {
	selection,
}: {
	selection: LinkSelection;
} ): JSX.Element {
	const { apply } = useFixActions();
	const [ isBusy, setBusy ] = useState( false );

	const runBulkAction = async ( action: BulkAction ) => {
		setBusy( true );
		await apply( {
			action,
			link_ids: selection.selectedLinks.map( ( link ) => link.id ),
		} );
		setBusy( false );
		selection.clear();
	};

	return (
		<div className="bulk">
			<span>
				{ sprintf(
					/* translators: %s: number of links, for example "3 links" */
					__( '%s selected', 'aiplaz-link-checkup' ),
					linksPhrase( selection.selectedLinks.length )
				) }
			</span>
			<span className="grow" />
			<Button
				size="sm"
				icon="unlink"
				disabled={ isBusy }
				onClick={ () => {
					void runBulkAction( 'remove' );
				} }
			>
				{ __( 'Remove links', 'aiplaz-link-checkup' ) }
			</Button>
			<Button
				size="sm"
				icon="eyeoff"
				disabled={ isBusy }
				onClick={ () => {
					void runBulkAction( 'ignore' );
				} }
			>
				{ __( 'Ignore', 'aiplaz-link-checkup' ) }
			</Button>
			<Button variant="quiet" size="sm" onClick={ selection.clear }>
				{ __( 'Clear', 'aiplaz-link-checkup' ) }
			</Button>
		</div>
	);
}