import { __, sprintf } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Link } from '../../shared/api/types/links';
import { linkName } from '../../shared/links/linkName';
import { openFixPanel } from '../../shared/links/openFixPanel';
import { isFixable, problemOf } from '../../shared/links/problem';
import { StatusPill } from '../../shared/links/ProblemBadges';
import { reasonText } from '../../shared/links/reasonText';
import { timeAgo } from '../../shared/lib/timeAgo';
import { placesPhrase } from '../../shared/text/countedPhrases';
import { Button } from '../../shared/ui/Button';
import { linkStateLabel } from './linkStateLabel';
import { problemAction } from './problemAction';

type LinkRowProps = {
	link: Link;
	now: number;
	isSelected: boolean;
	onSelect: ( isSelected: boolean ) => void;
};

export function LinkRow( {
	link,
	now,
	isSelected,
	onSelect,
}: LinkRowProps ): JSX.Element {
	const problem = problemOf( link );
	const name = linkName( link.url );
	const isLinkFixable = isFixable( link );
	const openPanel = () => {
		openFixPanel( link.id );
	};

	return (
		<div className="row">
			<input
				className="check"
				type="checkbox"
				checked={ isSelected }
				onChange={ ( event ) => {
					onSelect( event.target.checked );
				} }
				aria-label={ sprintf(
					/* translators: %s: address of a link */
					__( 'Select %s', 'aiplaz-link-checkup' ),
					name
				) }
			/>
			<div className="c-main">
				{ isLinkFixable ? (
					<button
						type="button"
						className="linkname"
						onClick={ openPanel }
					>
						{ name }
					</button>
				) : (
					<span className="linkname">{ name }</span>
				) }
				<span className="item-sub">{ reasonText( link ) }</span>
			</div>
			<span className="c-pill">
				{ isLinkFixable ? (
					<StatusPill problem={ problem } />
				) : (
					<span className="pill pill-idle">
						{ linkStateLabel( link ) }
					</span>
				) }
			</span>
			<span className="c-used num">
				{ placesPhrase( link.uses_count ) }
			</span>
			<span className="c-time">{ timeAgo( link.checked_at, now ) }</span>
			<span className="c-act">
				{ isLinkFixable && (
					<Button size="sm" onClick={ openPanel }>
						{ problemAction( problem ) }
					</Button>
				) }
			</span>
		</div>
	);
}