import { __, sprintf } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Job, JobUpdate } from '../../shared/api/types/jobs';
import { jobName } from '../../shared/jobs/jobTexts';
import { frequencyChangedText, isFrequency } from './jobChangeTexts';
import { frequencyLabel } from './jobDetails';

type JobFrequencySelectProps = {
	job: Job;
	onChange: ( update: JobUpdate, successText: string ) => void;
};

export function JobFrequencySelect( {
	job,
	onChange,
}: JobFrequencySelectProps ): JSX.Element {
	const name = jobName( job.id );
	const fieldId = `lcu-freq-${ job.id }`;

	return (
		<div className="job-freq">
			<label className="sr" htmlFor={ fieldId }>
				{ sprintf(
					/* translators: %s: name of a background job */
					__( 'How often %s runs', 'aiplaz-link-checkup' ),
					name
				) }
			</label>
			<select
				className="select"
				id={ fieldId }
				value={ job.frequency }
				onChange={ ( event ) => {
					const frequency = event.target.value;

					if ( isFrequency( frequency, job.frequencies ) ) {
						onChange(
							{ frequency },
							frequencyChangedText( name, frequency )
						);
					}
				} }
			>
				{ job.frequencies.map( ( frequency ) => (
					<option key={ frequency } value={ frequency }>
						{ frequencyLabel( frequency ) }
					</option>
				) ) }
			</select>
		</div>
	);
}