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

/**
 * External dependencies
 */
import { store as NAB_DATA, usePluginSetting } from '@nab/data';

export function GA4Tracking(): JSX.Element | null {
	const isGA4TrackingEnabled = usePluginSetting( 'isGA4TrackingEnabled' );
	const name = useSelect( ( select ) => {
		const id = select( NAB_DATA ).getPageAttribute(
			'editor/activeExperiment'
		);
		if ( ! id ) {
			return undefined;
		}
		return select( NAB_DATA ).getExperiment( id )?.extensions?.ga4Name;
	}, [] );

	if ( ! isGA4TrackingEnabled ) {
		return null;
	}

	return (
		<PanelRow className="nab-experiment-summary__status">
			<span>{ _x( 'GA4 Test Name', 'text', 'nelio-ab-testing' ) }</span>
			{ name ? (
				<code>{ name }</code>
			) : (
				<span>
					{ _x(
						'None',
						'text (experiment name)',
						'nelio-ab-testing'
					) }
				</span>
			) }
		</PanelRow>
	);
}