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

/**
 * External dependencies
 */
import { usePluginSetting } from '@nab/data';
import type { ConversionActionScope } from '@nab/types';

/**
 * Internal dependencies
 */
import './style.scss';

export type ConversionActionScopeViewProps = {
	readonly scope: ConversionActionScope;
};

export const ConversionActionScopeView = ( {
	scope,
}: ConversionActionScopeViewProps ): JSX.Element | null => {
	const goalTracking = usePluginSetting( 'goalTracking' );

	if ( 'custom' !== goalTracking ) {
		return null;
	}

	switch ( scope.type ) {
		case 'all-pages':
		case 'test-scope':
		case 'php-function':
			return null;

		case 'post-ids':
			return (
				<div className="nab-conversion-action__scope-view">
					{ createInterpolateElement(
						sprintf(
							/* translators: %s: List of page/post IDs. */
							_x( 'IDs: %s', 'text', 'nelio-ab-testing' ),
							scope.ids
								.map( ( id ) => `<code>${ id }</code>` )
								.join( ', ' )
						),
						{ code: <code></code> }
					) }
				</div>
			);

		case 'urls':
			return (
				<div className="nab-conversion-action__scope-view">
					{ createInterpolateElement(
						sprintf(
							/* translators: %s: List of URLs. */
							_x( 'URLs: %s', 'text', 'nelio-ab-testing' ),
							scope.regexes
								.map( ( re ) => `<code>${ re }</code>` )
								.join( ', ' )
						),
						{ code: <code></code> }
					) }
				</div>
			);
	}
};