/**
 * 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: { event, videoId },
	scope,
}: CAViewProps< Attributes > ): JSX.Element => {
	if ( ! videoId ) {
		return (
			<>
				{ 'play' === event
					? getUnknownVideoPlayLabel( scope )
					: getUnknownVideoEndLabel( scope ) }
			</>
		);
	}

	return createInterpolateElement(
		'play' === event
			? sprintf(
					getKnownVideoPlayLabel( scope ),
					`<code>${ videoId }</code>`
			  )
			: sprintf(
					getKnownVideoEndLabel( scope ),
					`<code>${ videoId }</code>`
			  ),
		{ code: <code /> }
	);
};

// =======
// HELPERS
// =======

function getUnknownVideoPlayLabel( scope: ConversionActionScope ): string {
	switch ( scope.type ) {
		case 'all-pages':
			return _x(
				'A visitor plays a specific YouTube video on any page.',
				'text',
				'nelio-ab-testing'
			);

		case 'test-scope':
			return _x(
				'A visitor plays a specific YouTube video on a tested page.',
				'text',
				'nelio-ab-testing'
			);

		case 'urls':
		case 'post-ids':
		case 'php-function':
			return _x(
				'A visitor plays a specific YouTube video on certain pages.',
				'text',
				'nelio-ab-testing'
			);
	}
}

function getUnknownVideoEndLabel( scope: ConversionActionScope ): string {
	switch ( scope.type ) {
		case 'all-pages':
			return _x(
				'A visitor reaches the end of a YouTube video on any page.',
				'text',
				'nelio-ab-testing'
			);

		case 'test-scope':
			return _x(
				'A visitor reaches the end of a YouTube video on a tested page.',
				'text',
				'nelio-ab-testing'
			);

		case 'urls':
		case 'post-ids':
		case 'php-function':
			return _x(
				'A visitor reaches the end of a YouTube video on certain pages.',
				'text',
				'nelio-ab-testing'
			);
	}
}

function getKnownVideoPlayLabel( scope: ConversionActionScope ): string {
	switch ( scope.type ) {
		case 'all-pages':
			/* translators: %s: Video id, such as “dQw4w9WgXcQ”. */
			return _x(
				'A visitor plays the YouTube video %s on any page.',
				'text',
				'nelio-ab-testing'
			);

		case 'test-scope':
			/* translators: %s: Video id, such as “dQw4w9WgXcQ”. */
			return _x(
				'A visitor plays the YouTube video %s on a tested page.',
				'text',
				'nelio-ab-testing'
			);

		case 'urls':
		case 'post-ids':
		case 'php-function':
			/* translators: %s: Video id, such as “dQw4w9WgXcQ”. */
			return _x(
				'A visitor plays the YouTube video %s on certain pages.',
				'text',
				'nelio-ab-testing'
			);
	}
}

function getKnownVideoEndLabel( scope: ConversionActionScope ): string {
	switch ( scope.type ) {
		case 'all-pages':
			/* translators: %s: Video id, such as “dQw4w9WgXcQ”. */
			return _x(
				'A visitor reaches the end of the YouTube video %s on any page.',
				'text',
				'nelio-ab-testing'
			);

		case 'test-scope':
			/* translators: %s: Video id, such as “dQw4w9WgXcQ”. */
			return _x(
				'A visitor reaches the end of the YouTube video %s on a tested page.',
				'text',
				'nelio-ab-testing'
			);

		case 'urls':
		case 'post-ids':
		case 'php-function':
			/* translators: %s: Video id, such as “dQw4w9WgXcQ”. */
			return _x(
				'A visitor reaches the end of the YouTube video %s on certain pages.',
				'text',
				'nelio-ab-testing'
			);
	}
}