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

/**
 * External dependencies
 */
import { store as NAB_DATA } from '@nab/data';

/**
 * Internal dependencies
 */
import './style.scss';
import { RecentlyFinishedExperiment } from './recently-finished-experiment';

export function RecentlyFinishedExperiments(): JSX.Element {
	const {
		allRecentlyFinishedExperiments,
		allResultsLink,
		isLoading,
		recentCount,
		runningCount,
	} = useSelect(
		( select ) => ( {
			allRecentlyFinishedExperiments:
				select( NAB_DATA ).getRecentlyFinishedExperimentSummaries(),
			allResultsLink: select( NAB_DATA ).getAdminUrl(
				'edit.php?post_type=nab_experiment&post_status=nab_running&order=desc'
			),
			isLoading: ! select( NAB_DATA ).isRecommendationEngineDataLoaded(),
			recentCount:
				select( NAB_DATA ).getRecentlyFinishedExperimentCount(),
			runningCount: select( NAB_DATA ).getRunningExperimentCount(),
		} ),
		[]
	);

	const recentlyFinishedExperiments =
		runningCount <= 2 && allRecentlyFinishedExperiments.length > 3
			? allRecentlyFinishedExperiments.slice( 0, 3 )
			: allRecentlyFinishedExperiments;

	if ( ! recentlyFinishedExperiments.length || isLoading ) {
		return (
			<section className="nab-recent-results nab-overview-card">
				<div className="nab-recent-results__header">
					<h2 className="nab-recent-results__title">
						{ _x(
							'Recently finished',
							'text',
							'nelio-ab-testing'
						) }
					</h2>
				</div>

				<div className="nab-recent-results__empty">
					<div
						className="nab-recent-results__empty-graphic"
						aria-hidden="true"
					>
						🏁
					</div>
					<h3 className="nab-recent-results__empty-title">
						{ isLoading
							? _x( 'Loading…', 'text', 'nelio-ab-testing' )
							: _x(
									'No recently finished tests',
									'text',
									'nelio-ab-testing'
							  ) }
					</h3>
					{ ! isLoading && (
						<p className="nab-recent-results__empty-text">
							{ runningCount
								? _x(
										'Your tests are still warming up. Results will appear here once a test finishes.',
										'text',
										'nelio-ab-testing'
								  )
								: _x(
										'Run and finish your first test to start building your optimization history.',
										'user',
										'nelio-ab-testing'
								  ) }
						</p>
					) }
				</div>
			</section>
		);
	}

	return (
		<section className="nab-recent-results nab-overview-card">
			<div className="nab-recent-results__header">
				<h2 className="nab-recent-results__title">
					{ _x( 'Recently finished', 'text', 'nelio-ab-testing' ) }
					<span className="nab-recent-results__count">
						{ recentCount }
					</span>
				</h2>
			</div>

			<ul className="nab-recent-results__list">
				{ recentlyFinishedExperiments.map( ( experiment ) => (
					<RecentlyFinishedExperiment
						key={ experiment.id }
						experiment={ experiment }
					/>
				) ) }
			</ul>

			<Button
				variant="link"
				className="nab-recent-results__footer-link"
				href={ allResultsLink }
			>
				{ _x( 'All results →', 'command', 'nelio-ab-testing' ) }
			</Button>
		</section>
	);
}