import { __, sprintf } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Link } from '../../shared/api/types/links';
import { useNow } from '../../shared/lib/clock';
import { formatNumber } from '../../shared/lib/numbers';
import { LinkRow } from './LinkRow';
import { LinksPager } from './LinksPager';
import { LinksTableHead } from './LinksTableHead';
import type { LinkSelection } from './useLinkSelection';

const SLOW_REFRESH_MILLISECONDS = 30000;

type LinksTableProps = {
	shownLinks: readonly Link[];
	selection: LinkSelection;
	problemTotal: number;
	page: number;
	pageCount: number;
};

export function LinksTable( {
	shownLinks,
	selection,
	problemTotal,
	page,
	pageCount,
}: LinksTableProps ): JSX.Element {
	const now = useNow( SLOW_REFRESH_MILLISECONDS );

	return (
		<>
			<LinksTableHead
				selection={ selection }
				isEverySelected={
					selection.selectedLinks.length === shownLinks.length
				}
			/>
			{ shownLinks.map( ( link ) => (
				<LinkRow
					key={ link.id }
					link={ link }
					now={ now }
					isSelected={ selection.selectedIds.has( link.id ) }
					onSelect={ ( isSelected ) => {
						selection.select( link.id, isSelected );
					} }
				/>
			) ) }
			<div className="list-foot num">
				<span>
					{ sprintf(
						/* translators: 1: number of links shown, 2: number of links that need attention */
						__( 'Showing %1$s of %2$s', 'aiplaz-link-checkup' ),
						formatNumber( shownLinks.length ),
						formatNumber( problemTotal )
					) }
				</span>
				{ pageCount > 1 && (
					<LinksPager page={ page } pageCount={ pageCount } />
				) }
			</div>
		</>
	);
}