import { __, sprintf } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Settings } from '../../shared/api/types/settings';
import { formatNumber } from '../../shared/lib/numbers';
import { millisecondsPhrase } from '../../shared/text/countedPhrases';
import { useSaveSettings } from './useSaveSettings';

const PAUSE_AT_CHOICES: readonly number[] = [ 100, 200, 500 ];
const BATCH_SIZE_CHOICES: readonly number[] = [ 10, 25, 50 ];

export function DatabaseLimits( {
	limits,
}: {
	limits: Settings[ 'database' ];
} ): JSX.Element {
	const saveSettings = useSaveSettings();

	return (
		<>
			<div className="setting">
				<label className="label" htmlFor="lcu-db-limit">
					{ __(
						'Pause jobs when slower than',
						'aiplaz-link-checkup'
					) }
				</label>
				<select
					className="select"
					id="lcu-db-limit"
					value={ limits.pause_at_ms }
					onChange={ ( event ) => {
						const pauseAtMilliseconds = Number(
							event.target.value
						);

						saveSettings(
							{ database: { pause_at_ms: pauseAtMilliseconds } },
							sprintf(
								/* translators: %s: number of milliseconds */
								__(
									'Jobs now pause at %s ms.',
									'aiplaz-link-checkup'
								),
								formatNumber( pauseAtMilliseconds )
							)
						);
					} }
				>
					{ PAUSE_AT_CHOICES.map( ( choice ) => (
						<option key={ choice } value={ choice }>
							{ millisecondsPhrase( choice ) }
						</option>
					) ) }
				</select>
			</div>
			<div className="setting">
				<label className="label" htmlFor="lcu-db-batch">
					{ __( 'Links checked per step', 'aiplaz-link-checkup' ) }
				</label>
				<select
					className="select"
					id="lcu-db-batch"
					value={ limits.batch_size }
					onChange={ ( event ) => {
						const batchSize = Number( event.target.value );

						saveSettings(
							{ database: { batch_size: batchSize } },
							sprintf(
								/* translators: %s: number of links */
								__(
									'%s links are checked per step.',
									'aiplaz-link-checkup'
								),
								formatNumber( batchSize )
							)
						);
					} }
				>
					{ BATCH_SIZE_CHOICES.map( ( choice ) => (
						<option key={ choice } value={ choice }>
							{ formatNumber( choice ) }
						</option>
					) ) }
				</select>
			</div>
		</>
	);
}