import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import { useJobs } from '../../shared/api/useJobs';
import { jobName, jobNextRun } from '../../shared/jobs/jobTexts';
import { classNames } from '../../shared/lib/classNames';
import { useNow } from '../../shared/lib/clock';
import { navigate } from '../../shared/lib/router';
import { Button } from '../../shared/ui/Button';
import { BoxHead } from './BoxHead';

const SECOND_MILLISECONDS = 1000;
const JOBS_SHOWN = 3;

export function JobsBox(): JSX.Element {
	const now = useNow( SECOND_MILLISECONDS );
	const jobsQuery = useJobs();
	const shownJobs = ( jobsQuery.data ?? [] ).slice( 0, JOBS_SHOWN );

	return (
		<section className="stat">
			<BoxHead
				icon="clock"
				title={ __( 'Background jobs', 'aiplaz-link-checkup' ) }
			>
				<Button
					variant="quiet"
					size="sm"
					onClick={ () => {
						navigate( 'schedule' );
					} }
				>
					{ __( 'Manage', 'aiplaz-link-checkup' ) }
				</Button>
			</BoxHead>
			{ shownJobs.map( ( job ) => (
				<div className="kv" key={ job.id }>
					<span className="k">
						<span
							className={ classNames(
								'live',
								! job.enabled && 'off'
							) }
						/>
						{ jobName( job.id ) }
					</span>
					<span className="v num">{ jobNextRun( job, now ) }</span>
				</div>
			) ) }
		</section>
	);
}