import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Status } from '../../shared/api/types/status';
import { useRoute } from '../../shared/lib/router';
import { FilterChips } from './FilterChips';
import { FixAllButton } from './FixAllButton';
import { linksFilterOf } from './linksFilter';
import { linksLede } from './linksLede';
import { LinksList } from './LinksList';
import { linksQueryOf } from './linksQuery';
import { LinksSearch } from './LinksSearch';

export function LinksView( { status }: { status: Status } ): JSX.Element {
	const { params } = useRoute();
	const activeFilter = linksFilterOf( params );
	const search = params.s ?? '';
	const { counts } = status;
	const problemTotal = counts.broken + counts.blocked + counts.moved;

	return (
		<section
			className="view"
			aria-label={ __( 'Links', 'aiplaz-link-checkup' ) }
		>
			<div className="view-head">
				<div>
					<h1 className="display">
						{ __( 'Links', 'aiplaz-link-checkup' ) }
					</h1>
					<p className="lede">
						{ linksLede( counts, problemTotal ) }
					</p>
				</div>
				<FixAllButton activeFilter={ activeFilter } counts={ counts } />
			</div>
			<div className="toolbar">
				<FilterChips
					activeFilter={ activeFilter }
					counts={ counts }
					problemTotal={ problemTotal }
				/>
				<LinksSearch search={ search } />
			</div>
			<LinksList
				query={ linksQueryOf( params ) }
				problemTotal={ problemTotal }
			/>
		</section>
	);
}