import type { JSX } from 'react';
import type { LinksQuery } from '../../shared/api/types/links';
import { useLinks } from '../../shared/api/useLinks';
import { LoadError } from '../../shared/ui/LoadError';
import { Skeleton } from '../../shared/ui/Skeleton';
import { SelectableLinks } from './SelectableLinks';

type LinksListProps = {
	query: LinksQuery;
	problemTotal: number;
};

export function LinksList( {
	query,
	problemTotal,
}: LinksListProps ): JSX.Element {
	const linksQuery = useLinks( query );
	const linksPage = linksQuery.data;

	return (
		<>
			{ linksQuery.isPending && <Skeleton /> }
			{ linksQuery.isError && linksPage === undefined && (
				<LoadError
					error={ linksQuery.error }
					onRetry={ () => {
						void linksQuery.refetch();
					} }
				/>
			) }
			{ linksPage !== undefined && (
				<SelectableLinks
					key={ JSON.stringify( query ) }
					linksPage={ linksPage }
					query={ query }
					isStale={ linksQuery.isPlaceholderData }
					problemTotal={ problemTotal }
				/>
			) }
		</>
	);
}