/**
 * WordPress dependencies
 */
import { Button } from '@safe-wordpress/components';
import { useSelect } from '@safe-wordpress/data';
import { _x, sprintf } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import { store as NAB_EXPERIMENTS } from '@nab/experiments';
import type { PendingExperimentSummary } from '@nab/types';

/**
 * Internal dependencies
 */
import './style.scss';

type PendingExperimentProps = {
	readonly experiment: PendingExperimentSummary;
};

export function PendingExperiment( {
	experiment,
}: PendingExperimentProps ): JSX.Element | null {
	const experimentType = useSelect(
		( select ) =>
			select( NAB_EXPERIMENTS ).getExperimentType( experiment.type ),
		[ experiment.type ]
	);

	if ( ! experimentType ) {
		return null;
	}

	const Icon = experimentType.icon;
	return (
		<li className="nab-pending-test">
			<div className={ `nab-pending-test__icon` } aria-hidden="true">
				<Icon />
			</div>

			<div className="nab-pending-test__main">
				<strong className="nab-pending-test__name">
					{ experiment.name.trim()
						? experiment.name.trim()
						: _x( '(no name)', 'text', 'nelio-ab-testing' ) }
				</strong>
			</div>

			<Button
				variant="secondary"
				className="nab-pending-test__button"
				href={ experiment.editUrl }
				icon="edit"
				aria-label={ sprintf(
					/* translators: %s: Experiment name. */
					_x( 'View %s', 'command (experiment)', 'nelio-ab-testing' ),
					experiment.name
				) }
			/>
		</li>
	);
}