/**
 * 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 '../click/types';

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

const ActualView = ( {
	attributes: { mode, value },
	scope,
}: CAViewProps< Attributes > ): JSX.Element => {
	if ( ! value ) {
		return <>{ getHTMLElementLabel( scope ) }</>;
	}

	switch ( mode ) {
		case 'css':
			return (
				<>
					{ createInterpolateElement(
						sprintf(
							getCssLabel( scope ),
							`<code>${ value }</code>`
						),
						{ code: <code /> }
					) }
				</>
			);

		case 'id':
			return (
				<>
					{ createInterpolateElement(
						sprintf(
							getIdLabel( scope ),
							`<code>${ value }</code>`
						),
						{ code: <code /> }
					) }
				</>
			);

		case 'class':
			return (
				<>
					{ createInterpolateElement(
						sprintf(
							getClassNameLabel( scope ),
							`<code>${ value }</code>`
						),
						{ code: <code /> }
					) }
				</>
			);
	}
};

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

function getHTMLElementLabel( scope: ConversionActionScope ): string {
	switch ( scope.type ) {
		case 'all-pages':
			return _x(
				'A visitor views an HTML element on any page.',
				'text',
				'nelio-ab-testing'
			);

		case 'test-scope':
			return _x(
				'A visitor views an HTML element on a tested page.',
				'text',
				'nelio-ab-testing'
			);

		case 'urls':
		case 'post-ids':
		case 'php-function':
			return _x(
				'A visitor views an HTML element on certain pages.',
				'text',
				'nelio-ab-testing'
			);
	}
}

function getCssLabel( scope: ConversionActionScope ): string {
	switch ( scope.type ) {
		case 'all-pages':
			/* translators: %s: CSS selector, such as "a.button". */
			return _x(
				'A visitor views an element matching the CSS selector %s on any page.',
				'text',
				'nelio-ab-testing'
			);

		case 'test-scope':
			/* translators: %s: CSS selector, such as "a.button". */
			return _x(
				'A visitor views an element matching the CSS selector %s on a tested page.',
				'text',
				'nelio-ab-testing'
			);

		case 'urls':
		case 'post-ids':
		case 'php-function':
			/* translators: %s: CSS selector, such as "a.button". */
			return _x(
				'A visitor views an element matching the CSS selector %s on certain pages.',
				'text',
				'nelio-ab-testing'
			);
	}
}

function getIdLabel( scope: ConversionActionScope ): string {
	switch ( scope.type ) {
		case 'all-pages':
			/* translators: %s: HTML id, such as "content". */
			return _x(
				'A visitor views the %s element on any page.',
				'text',
				'nelio-ab-testing'
			);

		case 'test-scope':
			/* translators: %s: HTML id, such as "content". */
			return _x(
				'A visitor views the %s element on a tested page.',
				'text',
				'nelio-ab-testing'
			);

		case 'urls':
		case 'post-ids':
		case 'php-function':
			/* translators: %s: HTML id, such as "content". */
			return _x(
				'A visitor views the %s element on certain pages.',
				'text',
				'nelio-ab-testing'
			);
	}
}

function getClassNameLabel( scope: ConversionActionScope ): string {
	switch ( scope.type ) {
		case 'all-pages':
			/* translators: %s: HTML id, such as "content". */
			return _x(
				'A visitor views an element with class %s on any page.',
				'text',
				'nelio-ab-testing'
			);

		case 'test-scope':
			/* translators: %s: HTML id, such as "content". */
			return _x(
				'A visitor views an element with class %s on a tested page.',
				'text',
				'nelio-ab-testing'
			);

		case 'urls':
		case 'post-ids':
		case 'php-function':
			/* translators: %s: HTML id, such as "content". */
			return _x(
				'A visitor views an element with class %s on certain pages.',
				'text',
				'nelio-ab-testing'
			);
	}
}