import { __, _n, sprintf } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { LinkDetail } from '../../shared/api/types/links';
import { formatNumber } from '../../shared/lib/numbers';
import { placesPhrase } from '../../shared/text/countedPhrases';
import { Icon } from '../../shared/ui/Icon';

const USES_SHOWN = 3;

export function Uses( { link }: { link: LinkDetail } ): JSX.Element {
	const shownUses = link.uses.slice( 0, USES_SHOWN );
	const hiddenCount = link.uses_count - shownUses.length;

	return (
		<div className="sec">
			<h3>
				{ sprintf(
					/* translators: %s: number of places, for example "3 places" */
					__( 'Used in %s', 'aiplaz-link-checkup' ),
					placesPhrase( link.uses_count )
				) }
			</h3>
			{ shownUses.map( ( use, index ) => (
				<div
					className="use"
					key={ `${ String( use.post_id ) }-${ String( index ) }` }
				>
					<div className="use-top">
						<b>{ use.post_title }</b>
						<span>{ use.post_type_label }</span>
					</div>
					<p>
						{ use.before }
						<mark>{ use.text }</mark>
						{ use.after }
					</p>
					{ use.builder !== null && (
						<p className="use-builder">
							<Icon name="info" />
							<span>
								{ sprintf(
									/* translators: 1: name of a page builder, for example Elementor */
									__(
										'This page is made with %1$s. Change the link in the %1$s editor.',
										'aiplaz-link-checkup'
									),
									use.builder
								) }
							</span>
						</p>
					) }
					{ use.view_url !== null && (
						<a
							className="use-view"
							href={ use.view_url }
							target="_blank"
							rel="noopener noreferrer"
						>
							<Icon name="external" />
							{ __( 'Show on page', 'aiplaz-link-checkup' ) }
						</a>
					) }
				</div>
			) ) }
			{ hiddenCount > 0 && (
				<span className="muted">
					{ sprintf(
						/* translators: %s: number of places */
						_n(
							'and %s more place',
							'and %s more places',
							hiddenCount,
							'aiplaz-link-checkup'
						),
						formatNumber( hiddenCount )
					) }
				</span>
			) }
		</div>
	);
}