import { __, sprintf } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Job, JobUpdate } from '../../shared/api/types/jobs';
import { jobName, jobNextRun } from '../../shared/jobs/jobTexts';
import { classNames } from '../../shared/lib/classNames';
import { Icon } from '../../shared/ui/Icon';
import { Switch } from '../../shared/ui/Switch';
import { switchedText } from './jobChangeTexts';
import { jobDescription, jobIcon, jobLastResult } from './jobDetails';
import { JobFrequencySelect } from './JobFrequencySelect';
import { useUpdateJob } from './jobQueries';
import { useNotifyOutcome } from '../../shared/ui/useNotifyOutcome';

const PAUSED_JOB_STYLE = {
	background: 'var(--sunken)',
	color: 'var(--muted)',
};

type JobRowProps = {
	job: Job;
	now: number;
};

export function JobRow( { job, now }: JobRowProps ): JSX.Element {
	const updateJob = useUpdateJob();
	const notifyOutcome = useNotifyOutcome();
	const name = jobName( job.id );

	const changeJob = ( update: JobUpdate, successText: string ) => {
		updateJob.mutate(
			{ id: job.id, update },
			notifyOutcome( successText )
		);
	};

	return (
		<div className="job">
			<span
				className={ classNames( 'dot', job.enabled && 'dot-ok' ) }
				style={ job.enabled ? undefined : PAUSED_JOB_STYLE }
			>
				<Icon name={ jobIcon( job.id ) } />
			</span>
			<div>
				<div className="job-name">{ name }</div>
				<div className="job-desc">{ jobDescription( job.id ) }</div>
			</div>
			<JobFrequencySelect job={ job } onChange={ changeJob } />
			<div className="job-next">
				<span className="muted">
					{ __( 'Next run', 'aiplaz-link-checkup' ) }
				</span>
				<b className="num">{ jobNextRun( job, now ) }</b>
				<span className="muted">
					{ sprintf(
						/* translators: %s: what the job did the last time, for example "25 links checked" */
						__( 'Last: %s', 'aiplaz-link-checkup' ),
						jobLastResult( job )
					) }
				</span>
			</div>
			<div className="job-ctl">
				<Switch
					checked={ job.enabled }
					aria-label={ sprintf(
						/* translators: %s: name of a background job */
						__( '%s on or off', 'aiplaz-link-checkup' ),
						name
					) }
					onChange={ ( event ) => {
						const isEnabled = event.target.checked;

						changeJob(
							{ enabled: isEnabled },
							switchedText( name, isEnabled )
						);
					} }
				/>
			</div>
		</div>
	);
}