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

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

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

import { getMoneyLabel, getNumberLabel } from '../../utils';
import { useAreUniqueResultsVisible } from '../../hooks';

export function Metrics(): JSX.Element {
	const {
		areResultsUnique,
		conversionRate,
		conversions,
		ecommerce,
		uniquePageViews,
		totalPageViews,
		revenue,
	} = useAttributes();

	return (
		<>
			<PanelRow className="nab-experiment-summary__views">
				<span>
					{ areResultsUnique
						? _x( 'Total Page Views', 'text', 'nelio-ab-testing' )
						: _x( 'Page Views', 'text', 'nelio-ab-testing' ) }
				</span>
				<span>{ getNumberLabel( totalPageViews ) }</span>
			</PanelRow>
			{ areResultsUnique && (
				<PanelRow className="nab-experiment-summary__unique-views">
					<span>
						{ _x(
							'Unique Page Views',
							'text',
							'nelio-ab-testing'
						) }
					</span>
					<span>{ getNumberLabel( uniquePageViews ) }</span>
				</PanelRow>
			) }
			{ !! ecommerce && (
				<PanelRow className="nab-experiment-summary__revenue">
					<span>{ _x( 'Revenue', 'text', 'nelio-ab-testing' ) }</span>
					<span>{ getMoneyLabel( revenue, ecommerce ) }</span>
				</PanelRow>
			) }
			<PanelRow className="nab-experiment-summary__conversions">
				<span>
					{ areResultsUnique
						? _x( 'Unique Conversions', 'text', 'nelio-ab-testing' )
						: _x( 'Conversions', 'text', 'nelio-ab-testing' ) }
				</span>
				<span>{ getNumberLabel( conversions ) }</span>
			</PanelRow>
			<PanelRow className="nab-experiment-summary__conversion-rate">
				<span>
					{ _x( 'Conversion Rate', 'text', 'nelio-ab-testing' ) }
				</span>
				<span>{ getConversionRateLabel( conversionRate ) }</span>
			</PanelRow>
		</>
	);
}

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

const useAttributes = () => {
	const [ areResultsUnique ] = useAreUniqueResultsVisible();
	return useSelect(
		( select ) => {
			const {
				getConversions,
				getExperimentAttribute,
				getPageAttribute,
				getPageViews,
				getTotalPageViews,
				getUniquePageViews,
				getTotalRevenue,
				getECommercePlugin,
			} = select( NAB_DATA );

			const activeExperiment =
				getPageAttribute( 'editor/activeExperiment' ) ?? 0;
			const goals =
				getExperimentAttribute( activeExperiment, 'goals' ) ?? [];
			const activeGoalId =
				getPageAttribute( 'editor/activeGoal' ) ?? goals[ 0 ]?.id ?? '';
			const pageViews = getPageViews( activeExperiment );
			const conversions = getConversions(
				activeExperiment,
				activeGoalId
			);
			const revenue = getTotalRevenue( activeExperiment, activeGoalId );

			return {
				totalPageViews: getTotalPageViews( activeExperiment ),
				uniquePageViews: getUniquePageViews( activeExperiment ),
				conversions,
				conversionRate: ( conversions / pageViews ) * 100 || 0,
				areResultsUnique,
				revenue,
				ecommerce: getECommercePlugin( activeExperiment, activeGoalId ),
			};
		},
		[ areResultsUnique ]
	);
};

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

function getConversionRateLabel( conversionRate?: number ): string {
	if ( ! conversionRate ) {
		return '—';
	}

	return sprintf( '%s%%', formatNumber( conversionRate ) );
}