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

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

/**
 * Internal dependencies
 */
import './style.scss';
import { PendingExperiments } from './pending-experiments';
import { RecentlyFinishedExperiments } from './recently-finished-experiments';
import { RunningExperiments } from './running-experiments';

type ExperimentSectionProps = {
	readonly onExtendedClicked: () => void;
};

export function ExperimentSection( {
	onExtendedClicked,
}: ExperimentSectionProps ): JSX.Element {
	const { pendingCount, runningCount } = useSelect(
		( select ) => ( {
			pendingCount:
				select( NAB_DATA ).getPendingExperimentSummaries().length,
			runningCount: select( NAB_DATA ).getRunningExperimentCount(),
		} ),
		[]
	);
	return (
		<div className="nab-overview-experiment-section">
			<div className="nab-overview-experiment-section__row">
				{ pendingCount && ! runningCount ? (
					<PendingExperiments />
				) : (
					<RunningExperiments
						onExtendedClicked={ onExtendedClicked }
					/>
				) }
				<RecentlyFinishedExperiments />
			</div>
		</div>
	);
}