import { __, sprintf } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Settings } from '../../shared/api/types/settings';
import type { Status } from '../../shared/api/types/status';
import { ResponseMeter } from '../../shared/database/ResponseMeter';
import { formatBytes, formatNumber } from '../../shared/lib/numbers';
import { millisecondsPhrase } from '../../shared/text/countedPhrases';
import { Icon } from '../../shared/ui/Icon';
import { DatabaseLimits } from './DatabaseLimits';
import { protections } from './protections';

type DatabaseProtectionProps = {
	database: Status[ 'database' ];
	limits: Settings[ 'database' ] | undefined;
};

export function DatabaseProtection( {
	database,
	limits,
}: DatabaseProtectionProps ): JSX.Element {
	return (
		<div className="panel protect">
			<div>
				<ul className="checks">
					{ protections().map( ( protection ) => (
						<li key={ protection.title }>
							<Icon name="check" />
							<span>
								<b>{ protection.title }</b>
								{ ` ${ protection.text }` }
							</span>
						</li>
					) ) }
				</ul>
			</div>
			<div>
				<div className="kv">
					<span className="k">
						{ __(
							'Database response time now',
							'aiplaz-link-checkup'
						) }
					</span>
					<span className="v num">
						{ millisecondsPhrase( database.response_ms ) }
					</span>
				</div>
				<ResponseMeter
					responseMilliseconds={ database.response_ms }
					pauseAtMilliseconds={ database.pause_at_ms }
				/>
				{ limits !== undefined && <DatabaseLimits limits={ limits } /> }
				<div className="setting">
					<span className="label">
						{ __( 'Plugin data', 'aiplaz-link-checkup' ) }
					</span>
					<span className="num">
						<b>{ formatBytes( database.size_bytes ) }</b>{ ' ' }
						{ sprintf(
							/* translators: %s: number of database tables */
							__( 'in %s tables', 'aiplaz-link-checkup' ),
							formatNumber( database.tables )
						) }
					</span>
				</div>
			</div>
		</div>
	);
}