/**
 * WordPress dependencies
 */
import {
	Popover,
	Button,
	Spinner,
	RadioControl,
} from '@safe-wordpress/components';
import { useSelect, useDispatch } from '@safe-wordpress/data';
import { useCallback, useMemo, useState } from '@safe-wordpress/element';
import { sprintf, _x } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import { mapValues, trim } from 'lodash';
import { store as NAB_ACCOUNT } from '@nab/account';
import { store as NAB_DATA } from '@nab/data';
import { getLocale } from '@nab/date';
import type {
	Currency,
	FSLocalizedString,
	FastSpringProduct,
	FastSpringProductId,
} from '@nab/types';

import type { UpgradePopoverProps } from './props';
import { isDefined } from '@nab/utils';

type Props = UpgradePopoverProps & {
	readonly showEnterprise: () => void;
};

export const RegularUpgradePopover = ( props: Props ): JSX.Element | null =>
	props.isOpen ? <ActualPopover { ...props } /> : null;

const ActualPopover = ( {
	placement,
	onClick,
	onFocusOutside,
	showEnterprise,
}: Props ) => {
	const isLoading = useIsLoading();
	const products = useProducts();
	const currency = useCurrency();
	const { upgradeSubscription } = useDispatch( NAB_ACCOUNT );
	const [ selectedOption, setSelectedOption ] = useState(
		'' as FastSpringProductId
	);

	if ( isLoading ) {
		return (
			<Popover
				className="nab-regular-upgrade-form nab-regular-upgrade-form--loading"
				focusOnMount={ true }
				noArrow={ false }
				placement={ placement }
				onFocusOutside={ onFocusOutside }
			>
				<Spinner />
			</Popover>
		);
	}

	return (
		<Popover
			className="nab-regular-upgrade-form"
			focusOnMount={ true }
			noArrow={ false }
			placement={ placement }
			onFocusOutside={ onFocusOutside }
		>
			<div className="nab-regular-upgrade-form__product-container">
				<h3>
					{ _x( 'Subscription Plans', 'text', 'nelio-ab-testing' ) }
				</h3>
				{ !! products.length ? (
					<RadioControl
						selected={ selectedOption }
						options={ products.map(
							( {
								id,
								displayName,
								price,
								description,
								enabledAddons,
							} ) => ( {
								label: (
									<div className="nab-regular-upgrade-form__product">
										<strong className="nab-regular-upgrade-form__product-name">
											{ localize( displayName ) }
										</strong>
										<span
											className="nab-regular-upgrade-form__product-price"
											title={ currency }
										>
											{ formatPrice(
												id,
												( price[ currency ] || 0 ) +
													enabledAddons.reduce(
														( acc, a ) =>
															acc +
															( a.price[
																currency
															] || 0 ),
														0
													),
												currency
											) }
										</span>
										<span className="nab-regular-upgrade-form__product-description">
											{ localize( description ) }
										</span>
									</div>
								 ) as unknown as string,
								value: id,
							} )
						) }
						onChange={ ( option ) => {
							if ( ! option ) {
								return;
							}
							if ( 'nab-enterprise-placeholder' === option ) {
								showEnterprise();
								return;
							}
							setSelectedOption( option );
						} }
					/>
				) : (
					<p>
						{ _x(
							'Something went wrong while retrieving plans. Please contact Nelio support.',
							'user',
							'nelio-ab-testing'
						) }
					</p>
				) }
			</div>

			<div className="nab-regular-upgrade-form__button-container">
				<Button
					variant="primary"
					className="nab-regular-upgrade-form__button"
					disabled={ ! selectedOption }
					onClick={ () => {
						onClick();
						void upgradeSubscription( selectedOption, 0 );
					} }
				>
					{ _x(
						'Upgrade Subscription',
						'command',
						'nelio-ab-testing'
					) }
				</Button>
			</div>
		</Popover>
	);
};

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

const useIsLoading = () =>
	useSelect(
		( select ) =>
			! select( NAB_DATA ).hasFinishedResolution( 'getProducts' ),
		[]
	);

const useProducts = (): ReadonlyArray<
	Pick<
		FastSpringProduct,
		'id' | 'displayName' | 'price' | 'description'
	> & {
		readonly enabledAddons: ReadonlyArray< FastSpringProduct >;
	}
> => {
	const { currentProduct, products, enabledAddons } = useSelect(
		( select ) => ( {
			products: select( NAB_DATA ).getProducts(),
			currentProduct: select( NAB_ACCOUNT ).getSubscriptionProduct(),
			enabledAddons: select( NAB_ACCOUNT ).getSubscriptionAddons(),
		} ),
		[]
	);

	const allUpgradeableProducts = products.filter( ( { upgradeableFrom } ) =>
		upgradeableFrom.includes( currentProduct )
	);
	const upgradeableProducts = allUpgradeableProducts.filter(
		( p ) => ! p.id.includes( 'enterprise' )
	);

	const enterpriseProduct =
		allUpgradeableProducts.find( ( p ) =>
			p.id.includes( 'enterprise-monthly' )
		) ||
		allUpgradeableProducts.find( ( p ) =>
			p.id.includes( 'enterprise-yearly' )
		);

	const addons = useMemo(
		() => products.filter( ( p ) => p.isAddon ),
		[ products ]
	);

	const getEnabledAddons = useCallback(
		( p?: FastSpringProduct ) =>
			( p?.allowedAddons ?? [] )
				.filter(
					( addonId ) =>
						!! enabledAddons.find( ( id ) =>
							areSameAddon( addonId, id )
						)
				)
				.map( ( addonId ) => addons.find( ( a ) => a.id === addonId ) )
				.filter( ( a ) => !! a ) as ReadonlyArray< FastSpringProduct >,
		[ addons, enabledAddons ]
	);

	return useMemo(
		() =>
			[
				...upgradeableProducts.map( ( p ) => ( {
					...p,
					enabledAddons: getEnabledAddons( p ),
				} ) ),
				enterpriseProduct
					? {
							...enterpriseProduct,
							enabledAddons:
								getEnabledAddons( enterpriseProduct ),
							id: 'nab-enterprise-placeholder' as FastSpringProductId,
							displayName: mapValues(
								enterpriseProduct.displayName ?? {
									en: '',
									es: '',
								},
								( name ) =>
									trim( name.replace( /\([^)]*\)/, '' ) )
							),
						}
					: undefined,
			].filter( isDefined ),
		[ upgradeableProducts, enterpriseProduct, getEnabledAddons ]
	);
};

const useCurrency = () =>
	useSelect( ( select ) => select( NAB_ACCOUNT ).getCurrency() || 'USD', [] );

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

const formatter = ( () => {
	try {
		return new Intl.NumberFormat( getLocale().replace( '_', '-' ) );
	} catch ( _ ) {
		return new Intl.NumberFormat( 'en-US' );
	}
} )();

const formatPrice = (
	product: string,
	price: number,
	currency: Currency
): string => {
	const result =
		'EUR' === currency
			? `${ formatter.format( Math.ceil( price ) ) }€`
			: `USD${ formatter.format( Math.ceil( price ) ) }`;
	if ( 'nab-enterprise-placeholder' === product ) {
		return sprintf(
			/* translators: %s: Price. */
			_x( 'starting from %s', 'text (money)', 'nelio-ab-testing' ),
			result
		);
	}
	return result;
};

const localize = ( str: FSLocalizedString ) => {
	const locale = getLocale();
	return locale.startsWith( 'es' )
		? str.es.replace( 'de Nelio A/B Testing', '' )
		: str.en.replace( 'Nelio A/B Testing', '' );
};

const areSameAddon = ( a: string, b: string ): boolean => {
	const aprefix = a.substring( 0, a.indexOf( 'addon-' ) );
	const bprefix = b.substring( 0, b.indexOf( 'addon-' ) );
	return !! aprefix && !! bprefix && aprefix === bprefix;
};