/**
 * WordPress dependencies
 */
import { Button } from '@safe-wordpress/components';
import { useSelect } from '@safe-wordpress/data';
import { useState } from '@safe-wordpress/element';
import { addQueryArgs } from '@safe-wordpress/url';
import { _x, sprintf } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import clsx from 'clsx';

import { Preview, Tooltip } from '@nab/components';
import { store as NAB_DATA } from '@nab/data';
import { store as NAB_EXPERIMENTS } from '@nab/experiments';
import { formatNumber } from '@nab/i18n';
import type {
	Experiment,
	ExperimentId,
	ExperimentTypeName,
	GoalId,
	Maybe,
	ResultStatus,
} from '@nab/types';

/**
 * Internal dependencies
 */
import './style.scss';
import { SummaryChart } from './summary-chart';

export type AlternativeExperimentProps = {
	readonly id: ExperimentId;
	readonly type: ExperimentTypeName;
	readonly name: Experiment[ 'name' ];
};

export const AlternativeExperiment = ( {
	id,
	name,
	type,
}: AlternativeExperimentProps ): JSX.Element => {
	const [ goalIndex, setGoalIndex ] = useState( 0 );
	const minSampleSize = useMinSampleSize();
	const {
		experiment,
		preview,
		ecommerce,
		goalCount,
		result: {
			areViewsUnique,
			status: originalStatus,
			views = 0,
			daysRunning = 0,
			conversionRates = [],
			values = [],
		} = {},
	} = useResults( id, goalIndex );

	const nextGoal = () => setGoalIndex( ( goalIndex + 1 ) % goalCount );
	const prevGoal = () =>
		setGoalIndex( ( goalCount + goalIndex - 1 ) % goalCount );

	const experimentType = useExperimentType( type );
	const Icon = experimentType?.icon ?? ( () => <></> );

	const areResultsLoaded = !! conversionRates.length;
	const isThereEnoughData = minSampleSize <= views;

	let status = originalStatus ?? 'testing';
	let message = getStatusMessage( status );
	if ( ! areResultsLoaded ) {
		message = _x( 'Loading…', 'text', 'nelio-ab-testing' );
	} else if ( ! isThereEnoughData ) {
		message = _x(
			'There isn’t enough data to find a winning variant',
			'text',
			'nelio-ab-testing'
		);
		status = 'testing';
	}

	return (
		<article className="nab-extended-running-experiment">
			<header className="nab-extended-running-experiment__header">
				<h1 className="nab-extended-running-experiment__title">
					{ Icon && (
						<Icon className="nab-extended-running-experiment__icon" />
					) }
					{ name }
				</h1>
				<Tooltip placement="left" text={ message }>
					<div
						className={ clsx( {
							'nab-extended-running-experiment__status': true,
							[ `nab-extended-running-experiment__status--${ status }` ]:
								areResultsLoaded,
							'nab-extended-running-experiment__status--loading':
								! areResultsLoaded,
						} ) }
					></div>
				</Tooltip>
			</header>

			<div className="nab-extended-running-experiment__content">
				<Preview
					className="nab-extended-running-experiment__screenshot"
					url={ preview }
					caption={ _x(
						'Test screenshot.',
						'text',
						'nelio-ab-testing'
					) }
				/>

				<p className="screen-reader-text">
					{ _x(
						'Collected data about this test:',
						'text',
						'nelio-ab-testing'
					) }
				</p>

				<ul className="nab-extended-running-experiment__data">
					{ goalCount > 1 && (
						<li className="nab-extended-running-experiment__data-item nab-extended-running-experiment__goals">
							<Tooltip
								placement="bottom"
								text={ getTooltipGoalName(
									experiment,
									goalIndex
								) }
							>
								<span className="nab-extended-running-experiment__data-measure">
									{ getShortGoalName(
										experiment,
										goalIndex
									) }
								</span>
							</Tooltip>
							<span className="nab-extended-running-experiment__data-value">
								<Button
									className="nab-extended-running-experiment__goal-switch nab-extended-running-experiment__prev-switch"
									onClick={ prevGoal }
									icon="arrow-left-alt2"
									title={ _x(
										'View previous goal',
										'command',
										'nelio-ab-testing'
									) }
								/>
								<Button
									className="nab-extended-running-experiment__goal-switch nab-extended-running-experiment__next-switch"
									onClick={ nextGoal }
									icon="arrow-right-alt2"
									title={ _x(
										'View next goal',
										'command',
										'nelio-ab-testing'
									) }
								/>
							</span>
						</li>
					) }
					<li className="nab-extended-running-experiment__data-item">
						<span className="nab-extended-running-experiment__data-measure">
							{ areViewsUnique
								? _x(
										'Unique Page Views',
										'text (overview)',
										'nelio-ab-testing'
								  )
								: _x(
										'Page Views',
										'text (overview)',
										'nelio-ab-testing'
								  ) }
							<span className="screen-reader-text">:</span>
						</span>
						<span className="nab-extended-running-experiment__data-value">
							{ formatNumber( views ) }
						</span>
					</li>
					<li className="nab-extended-running-experiment__data-item">
						<span className="nab-extended-running-experiment__data-measure">
							{ _x( 'Days running', 'text', 'nelio-ab-testing' ) }
							<span className="screen-reader-text">:</span>
						</span>
						<span className="nab-extended-running-experiment__data-value">
							{ formatNumber( daysRunning ) }
						</span>
					</li>
				</ul>

				<div className="nab-extended-running-experiment__graphic">
					<SummaryChart
						type={ !! ecommerce ? 'revenue' : 'conversion-rates' }
						data={ !! ecommerce ? values : conversionRates }
						ecommerce={ ecommerce }
					/>
				</div>
			</div>

			<a
				className="nab-extended-running-experiment__link"
				href={ addQueryArgs( 'admin.php', {
					page: 'nelio-ab-testing-experiment-view',
					experiment: id,
				} ) }
			>
				<span className="screen-reader-text">
					{ _x( 'View', 'command', 'nelio-ab-testing' ) }
				</span>
			</a>
		</article>
	);
};

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

const useExperimentType = ( type: ExperimentTypeName ) =>
	useSelect(
		( select ) => select( NAB_EXPERIMENTS ).getExperimentType( type ),
		[ type ]
	);

const useMinSampleSize = () =>
	useSelect(
		( select ) => select( NAB_DATA ).getPluginSetting( 'minSampleSize' ),
		[]
	);

const useResults = ( id: ExperimentId, goalIndex: number ) => {
	const { experiment, preview, ecommerce, goalCount, ...result } = useSelect(
		( select ) => {
			const {
				areUniqueResultsVisible,
				getConversionRatesOfAlternativesInGoal,
				getDaysRunning,
				getECommercePlugin,
				getExperiment,
				getExperimentResultsStatus,
				getRevenuesOfAlternativesInGoal,
				getPageViews,
			} = select( NAB_DATA );

			const exp = getExperiment( id );
			const goals = exp?.goals;
			const goalId: Maybe< GoalId > = goals?.[ goalIndex ]?.id;

			return {
				experiment: exp,
				preview: exp?.links.preview ?? '',
				ecommerce: getECommercePlugin( id, goalId ),
				goalCount: goals?.length || 0,
				areViewsUnique: areUniqueResultsVisible( id ),
				status: getExperimentResultsStatus( id, goalId ),
				views: getPageViews( id ),
				daysRunning: getDaysRunning( id ),
				conversionRates: getConversionRatesOfAlternativesInGoal(
					id,
					goalId
				),
				values: getRevenuesOfAlternativesInGoal( id, goalId ),
			};
		},
		[ id, goalIndex ]
	);

	return { experiment, preview, ecommerce, goalCount, result };
};

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

function getStatusMessage( status?: ResultStatus ) {
	switch ( status ) {
		case 'winner':
			return _x( 'There is a winner!', 'text', 'nelio-ab-testing' );

		case 'possible-winner':
			return _x(
				'There is a winner with low confidence',
				'text',
				'nelio-ab-testing'
			);

		case 'testing':
		default:
			return _x( 'No winner found', 'text', 'nelio-ab-testing' );
	}
}

function getTooltipGoalName(
	experiment: Maybe< Experiment >,
	goalIndex: number
): Maybe< string > {
	const actualName = getActualGoalName( experiment, goalIndex );
	const shortName = getShortGoalName( experiment, goalIndex );
	return actualName !== shortName ? actualName : undefined;
}

function getShortGoalName(
	experiment: Maybe< Experiment >,
	goalIndex: number
): string {
	const name = getActualGoalName( experiment, goalIndex ) ?? '';
	const shortName = name.substring( 0, 20 ) + ( name.length > 20 ? '…' : '' );
	const defaultName =
		0 !== goalIndex
			? sprintf(
					/* translators: %d: Goal index. */
					_x( 'Goal %d', 'text (short format)', 'nelio-ab-testing' ),
					goalIndex
			  )
			: _x( 'Default Goal', 'text (short format)', 'nelio-ab-testing' );
	return shortName || defaultName;
}

function getActualGoalName(
	experiment: Maybe< Experiment >,
	goalIndex: number
): Maybe< string > {
	return experiment?.goals[ goalIndex ]?.attributes?.name;
}