import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import { classNames } from '../../shared/lib/classNames';
import { Icon } from '../../shared/ui/Icon';
import { Spinner } from './Spinner';
import type { AddressTestState } from './addressTest';

function TestOutcomeContent( {
	testState,
}: {
	testState: AddressTestState;
} ): JSX.Element {
	switch ( testState.kind ) {
		case 'none':
			return <></>;
		case 'checking':
			return (
				<>
					<Spinner />
					<span>
						{ __( 'Checking this address', 'aiplaz-link-checkup' ) }
					</span>
				</>
			);
		case 'ok':
		case 'bad':
			return (
				<>
					<Icon name={ testState.kind === 'ok' ? 'check' : 'x' } />
					<span>{ testState.text }</span>
				</>
			);
	}
}

export function TestOutcome( {
	testState,
}: {
	testState: AddressTestState;
} ): JSX.Element {
	return (
		<div
			className={ classNames(
				'test',
				testState.kind === 'ok' && 'ok',
				testState.kind === 'bad' && 'no'
			) }
			aria-live="polite"
		>
			<TestOutcomeContent testState={ testState } />
		</div>
	);
}