import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Counts } from '../../shared/api/types/status';
import { PROBLEMS, problemLabel } from '../../shared/links/problem';
import { formatNumber } from '../../shared/lib/numbers';
import { setParams } from '../../shared/lib/router';
import { ALL_FILTER, type LinksFilter } from './linksFilter';

type FilterChip = {
	filter: LinksFilter;
	label: string;
	count: number;
};

function filterChips( counts: Counts, problemTotal: number ): FilterChip[] {
	const chips: FilterChip[] = [
		{
			filter: ALL_FILTER,
			label: __( 'All', 'aiplaz-link-checkup' ),
			count: problemTotal,
		},
	];

	for ( const problem of PROBLEMS ) {
		chips.push( {
			filter: problem,
			label: problemLabel( problem ),
			count: counts[ problem ],
		} );
	}

	return chips;
}

type FilterChipsProps = {
	activeFilter: LinksFilter;
	counts: Counts;
	problemTotal: number;
};

export function FilterChips( {
	activeFilter,
	counts,
	problemTotal,
}: FilterChipsProps ): JSX.Element {
	return (
		<div
			className="chips"
			role="group"
			aria-label={ __( 'Filter links', 'aiplaz-link-checkup' ) }
		>
			{ filterChips( counts, problemTotal ).map( ( chip ) => (
				<button
					key={ chip.filter }
					type="button"
					className="chip"
					aria-pressed={ activeFilter === chip.filter }
					onClick={ () => {
						setParams( {
							status:
								chip.filter === ALL_FILTER
									? undefined
									: chip.filter,
							page: undefined,
						} );
					} }
				>
					{ chip.label }
					<span className="n num">
						{ formatNumber( chip.count ) }
					</span>
				</button>
			) ) }
		</div>
	);
}