import type { JSX } from 'react';
import type { Counts } from '../../shared/api/types/status';
import { PROBLEMS, problemLabel } from '../../shared/links/problem';
import { StatusDot } from '../../shared/links/ProblemBadges';
import { formatNumber } from '../../shared/lib/numbers';
import { navigate } from '../../shared/lib/router';
import { Icon } from '../../shared/ui/Icon';

const SEGMENT_CLASSES = {
	broken: 'seg-bad',
	blocked: 'seg-warn',
	moved: 'seg-moved',
} as const;

export function ProblemMix( { counts }: { counts: Counts } ): JSX.Element {
	return (
		<div className="mix">
			<div className="mix-bar" aria-hidden="true">
				{ PROBLEMS.filter( ( problem ) => counts[ problem ] > 0 ).map(
					( problem ) => (
						<span
							key={ problem }
							className={ SEGMENT_CLASSES[ problem ] }
							style={ { flex: counts[ problem ] } }
						/>
					)
				) }
			</div>
			<div className="legend">
				{ PROBLEMS.map( ( problem ) => (
					<button
						key={ problem }
						type="button"
						className="legend-item"
						onClick={ () => {
							navigate( 'links', { status: problem } );
						} }
					>
						<StatusDot problem={ problem } />
						<span className="l-count num">
							{ formatNumber( counts[ problem ] ) }
						</span>
						<span className="chev">
							<Icon name="chev" />
						</span>
						<span className="l-label">
							{ problemLabel( problem ) }
						</span>
					</button>
				) ) }
			</div>
		</div>
	);
}