import type { JSX } from 'react';
import type { LinksPage, LinksQuery } from '../../shared/api/types/links';
import { classNames } from '../../shared/lib/classNames';
import { BulkBar } from './BulkBar';
import { LinksTable } from './LinksTable';
import { NoLinks } from './NoLinks';
import { useLinkSelection } from './useLinkSelection';

const FIRST_PAGE = 1;

type SelectableLinksProps = {
	linksPage: LinksPage;
	query: LinksQuery;
	isStale: boolean;
	problemTotal: number;
};

export function SelectableLinks( {
	linksPage,
	query,
	isStale,
	problemTotal,
}: SelectableLinksProps ): JSX.Element {
	const shownLinks = linksPage.items;
	const selection = useLinkSelection( shownLinks );
	const pageCount = Math.ceil( linksPage.total / query.per_page );

	return (
		<>
			{ selection.selectedLinks.length > 0 && (
				<BulkBar selection={ selection } />
			) }
			<div
				className={ classNames( 'panel rows', isStale && 'is-stale' ) }
			>
				{ shownLinks.length > 0 ? (
					<LinksTable
						shownLinks={ shownLinks }
						selection={ selection }
						problemTotal={ problemTotal }
						page={ query.page ?? FIRST_PAGE }
						pageCount={ pageCount }
					/>
				) : (
					<NoLinks search={ query.search ?? '' } />
				) }
			</div>
		</>
	);
}