/**
 * WordPress dependencies
 */
import { createInterpolateElement } from '@safe-wordpress/element';
import { sprintf, _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 = ( {
	attributes: { value },
	scope,
}: CAViewProps< Attributes > ): JSX.Element => {
	const label = useLabel( scope );
	return createInterpolateElement(
		sprintf( label, `<strong>${ value }%</strong>` ),
		{ strong: <strong /> }
	);
};

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

const useLabel = ( scope: ConversionActionScope ): string => {
	switch ( scope.type ) {
		case 'all-pages':
			/* translators: %s: Percentage value, such as "50%". */
			return _x(
				'A visitor has achieved %s scroll depth on any page.',
				'text',
				'nelio-ab-testing'
			);

		case 'test-scope':
			/* translators: %s: Percentage value, such as "50%". */
			return _x(
				'A visitor has achieved %s scroll depth on a tested page.',
				'text',
				'nelio-ab-testing'
			);

		case 'urls':
		case 'post-ids':
		case 'php-function':
			/* translators: %s: Percentage value, such as "50%". */
			return _x(
				'A visitor has achieved %s scroll depth on certain pages.',
				'text',
				'nelio-ab-testing'
			);
	}
};