import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Status } from '../../shared/api/types/status';
import { classNames } from '../../shared/lib/classNames';
import { useNow } from '../../shared/lib/clock';
import { PauseScanButton } from '../../shared/scan/PauseScanButton';
import { ScanProgressBar } from '../../shared/scan/ScanProgressBar';
import { Icon } from '../../shared/ui/Icon';
import { BoxHead } from './BoxHead';
import {
	lastScanText,
	scanActivitySentence,
	scanTimeLeftText,
} from './scanBoxTexts';

const SLOW_REFRESH_MILLISECONDS = 30000;

function IdleScanBox( { status }: { status: Status } ): JSX.Element {
	const now = useNow( SLOW_REFRESH_MILLISECONDS );

	return (
		<section className="stat">
			<BoxHead icon="scan" title={ __( 'Scan', 'aiplaz-link-checkup' ) }>
				<span className="pill pill-ok">
					<Icon name="check" />
					{ __( 'Up to date', 'aiplaz-link-checkup' ) }
				</span>
			</BoxHead>
			<p className="stat-text">
				{ lastScanText( status.scan, status.counts, now ) }
			</p>
		</section>
	);
}

export function ScanBox( { status }: { status: Status } ): JSX.Element {
	const { scan } = status;
	const isPaused = scan.state === 'paused';

	if ( scan.state === 'idle' ) {
		return <IdleScanBox status={ status } />;
	}

	return (
		<section className="stat">
			<BoxHead icon="scan" title={ __( 'Scan', 'aiplaz-link-checkup' ) }>
				<span
					className={ classNames(
						'pill',
						isPaused ? 'pill-idle' : 'pill-ok'
					) }
				>
					{ isPaused
						? __( 'Paused', 'aiplaz-link-checkup' )
						: __( 'Running', 'aiplaz-link-checkup' ) }
				</span>
			</BoxHead>
			<ScanProgressBar
				scan={ scan }
				sideText={ scanTimeLeftText( scan ) }
			/>
			<p className="stat-text">{ scanActivitySentence( scan ) }</p>
			<div>
				<PauseScanButton isPaused={ isPaused } />
			</div>
		</section>
	);
}