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

/**
 * External dependencies
 */
import { ConversionActionScopeView } from '@nab/components';
import type { CAViewProps, ConversionActionScope } from '@nab/types';

/**
 * Internal dependencies
 */
import type { Attributes } from './types';

export const View = ( props: CAViewProps< Attributes > ): JSX.Element => (
	<>
		<div>
			<ActualView { ...props } />
		</div>
		<ConversionActionScopeView scope={ props.scope } />
	</>
);

const ActualView = ( { scope }: CAViewProps< Attributes > ): JSX.Element => {
	const label = useLabel( scope );
	return <>{ label }</>;
};

// =====
// HOOKS
// =====

const useLabel = ( scope: ConversionActionScope ): string => {
	switch ( scope.type ) {
		case 'all-pages':
			return _x(
				'A visitor engages with any page.',
				'text',
				'nelio-ab-testing'
			);

		case 'test-scope':
			return _x(
				'A visitor engages with a tested page.',
				'text',
				'nelio-ab-testing'
			);

		case 'urls':
		case 'post-ids':
		case 'php-function':
			return _x(
				'A visitor engages with certain pages.',
				'text',
				'nelio-ab-testing'
			);
	}
};