import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Counts } from '../../shared/api/types/status';
import { formatPercent } from '../../shared/lib/numbers';
import { RING_RADIUS, ringGeometry } from './ringGeometry';

const RING_SIZE = 148;
const RING_CENTER = RING_SIZE / 2;

export function HealthRing( { counts }: { counts: Counts } ): JSX.Element {
	const geometry = ringGeometry( counts );

	return (
		<div className="ring">
			<svg
				width={ RING_SIZE }
				height={ RING_SIZE }
				viewBox={ `0 0 ${ String( RING_SIZE ) } ${ String( RING_SIZE ) }` }
				aria-hidden="true"
			>
				<circle
					className="t"
					cx={ RING_CENTER }
					cy={ RING_CENTER }
					r={ RING_RADIUS }
				/>
				<circle
					className="no"
					cx={ RING_CENTER }
					cy={ RING_CENTER }
					r={ RING_RADIUS }
					strokeDasharray={ geometry.problemDash }
					strokeDashoffset={ -geometry.workingLength }
				/>
				<circle
					className="ok"
					cx={ RING_CENTER }
					cy={ RING_CENTER }
					r={ RING_RADIUS }
					strokeDasharray={ geometry.workingDash }
				/>
			</svg>
			<div className="ring-label">
				<div>
					<div className="ring-num num">
						{ formatPercent( geometry.workingPercent ) }%
					</div>
					<div className="ring-cap">
						{ __( 'of links work', 'aiplaz-link-checkup' ) }
					</div>
				</div>
			</div>
		</div>
	);
}