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

/**
 * External dependencies
 */
import type { ExperimentSuggestion, TestSuggestionCategory } from '@nab/types';

/**
 * Internal dependencies
 */
import './style.scss';
import { SuggestionIcon } from './suggestion-icon';

export type ExperimentSuggestionViewProps = {
	readonly value: ExperimentSuggestion;
	readonly isBusy: boolean;
	readonly isDisabled: boolean;
	readonly onCreateExperiment: () => void;
};

export function ExperimentSuggestionView( {
	value,
	isBusy,
	isDisabled,
	onCreateExperiment,
}: ExperimentSuggestionViewProps ): JSX.Element {
	return (
		<div
			className={ `nab-experiment-suggestion nab-experiment-suggestion--${
				value.category ?? 'other'
			}` }
		>
			<div className="nab-experiment-suggestion-category">
				<SuggestionIcon category={ value.category ?? 'other' } />
			</div>
			<div className="nab-experiment-suggestion-body">
				<div className="nab-experiment-suggestion-title">
					{ value.name }
				</div>
				{ !! value.description && (
					<div className="nab-experiment-suggestion-description">
						{ value.description }
					</div>
				) }
				<div>
					<div className="nab-experiment-suggestion-category-label">
						{ CATEGORY_LABELS[ value.category ?? 'other' ] }
					</div>
				</div>
			</div>
			<div className="nab-experiment-suggestion-actions">
				<Button
					variant="primary"
					isBusy={ isBusy }
					disabled={ isDisabled }
					onClick={ onCreateExperiment }
				>
					{ isBusy
						? _x( 'Creating Test…', 'command', 'nelio-ab-testing' )
						: _x( 'Create Test', 'command', 'nelio-ab-testing' ) }
				</Button>
			</div>
		</div>
	);
}

const CATEGORY_LABELS: Record< TestSuggestionCategory, string > = {
	'call-to-action': _x( 'Call to Action', 'text', 'nelio-ab-testing' ),
	content: _x( 'Content', 'text', 'nelio-ab-testing' ),
	form: _x( 'Form', 'text', 'nelio-ab-testing' ),
	headline: _x( 'Headline', 'text', 'nelio-ab-testing' ),
	media: _x( 'Media', 'text', 'nelio-ab-testing' ),
	navigation: _x( 'Navigation', 'text', 'nelio-ab-testing' ),
	other: _x( 'Other', 'text', 'nelio-ab-testing' ),
	trust: _x( 'Trust', 'text', 'nelio-ab-testing' ),
	'value-proposition': _x( 'Value Proposition', 'text', 'nelio-ab-testing' ),
	'visual-design': _x( 'Visual Design', 'text', 'nelio-ab-testing' ),
};