import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Status } from '../../shared/api/types/status';
import { classNames } from '../../shared/lib/classNames';
import { Button } from '../../shared/ui/Button';
import { useRunJobs } from './jobQueries';
import { lastRunText, schedulerHealthText } from './schedulerTexts';
import { useNotifyOutcome } from '../../shared/ui/useNotifyOutcome';

const UNHEALTHY_BANNER_STYLE = { borderLeftColor: 'var(--warn-fill)' };

type SchedulerBannerProps = {
	scheduler: Status[ 'scheduler' ];
	now: number;
};

export function SchedulerBanner( {
	scheduler,
	now,
}: SchedulerBannerProps ): JSX.Element {
	const runJobs = useRunJobs();
	const notifyOutcome = useNotifyOutcome();
	const lastRunAt = scheduler.last_run_at ?? '';

	return (
		<div
			className="banner"
			style={ scheduler.healthy ? undefined : UNHEALTHY_BANNER_STYLE }
		>
			<span
				className={ classNames( 'live', ! scheduler.healthy && 'off' ) }
			/>
			<span className="grow">
				<b>{ schedulerHealthText( scheduler.healthy ) }</b>{ ' ' }
				{ lastRunAt !== '' && (
					<span className="num">
						{ lastRunText( lastRunAt, now ) }
					</span>
				) }
			</span>
			<Button
				size="sm"
				icon="play"
				busy={ runJobs.isPending }
				onClick={ () => {
					runJobs.mutate(
						undefined,
						notifyOutcome(
							__(
								'Jobs started. They run one at a time.',
								'aiplaz-link-checkup'
							)
						)
					);
				} }
			>
				{ __( 'Run now', 'aiplaz-link-checkup' ) }
			</Button>
		</div>
	);
}