/**
 * WordPress dependencies
 */
import { Button, Modal } from '@safe-wordpress/components';
import { _x } from '@safe-wordpress/i18n';
import { addQueryArgs } from '@safe-wordpress/url';

/**
 * External dependencies
 */
import { noop } from 'lodash';

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

export type InfoModalProps = {
	readonly coupon: string;
	readonly isDismissible: boolean;
	readonly status: 'awaiting-checkout' | 'done' | 'error';
	readonly errorMessage?: string;
	readonly hasErrorLinkToPricingPage?: boolean;
	readonly onClose: () => void;
};

export const InfoModal = ( {
	coupon = 'none',
	status,
	errorMessage,
	hasErrorLinkToPricingPage,
	isDismissible,
	onClose,
}: InfoModalProps ): JSX.Element => {
	const title = useTitle( status );
	return (
		<Modal
			className="nab-subscribe-info-modal"
			title={ title }
			shouldCloseOnClickOutside={ false }
			shouldCloseOnEsc={ false }
			onRequestClose={ isDismissible ? onClose : noop }
			isDismissible={ isDismissible }
		>
			{ 'error' === status && (
				<>
					<p>
						{ errorMessage ??
							_x(
								'Something went wrong.',
								'text',
								'nelio-ab-testing'
							) }{ ' ' }
						{ hasErrorLinkToPricingPage
							? _x(
									'Please try again later or visit our website to subscribe:',
									'user',
									'nelio-ab-testing'
								)
							: _x(
									'Please try again later or get in touch with us.',
									'user',
									'nelio-ab-testing'
								) }
					</p>
					{ hasErrorLinkToPricingPage && (
						<p>
							<Button
								variant="link"
								onClick={ () => {
									onClose();
								} }
								href={ addQueryArgs(
									'https://neliosoftware.com/testing/pricing/',
									{ coupon }
								) }
							>
								{ _x(
									'View Pricing Page',
									'command',
									'nelio-ab-testing'
								) }
							</Button>
						</p>
					) }
				</>
			) }

			{ 'awaiting-checkout' === status && (
				<p>
					{ _x(
						'Finish the checkout process to continue. We’ll update this screen automatically when you’re done.',
						'user',
						'nelio-ab-testing'
					) }
				</p>
			) }

			{ 'done' === status && (
				<p>
					{ _x(
						'Your purchase was successful. It may take a couple of minutes for your new plan and quota to become available. Refresh this page in a few minutes to see the changes.',
						'user',
						'nelio-ab-testing'
					) }
				</p>
			) }
		</Modal>
	);
};

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

const useTitle = ( status: InfoModalProps[ 'status' ] ): string => {
	switch ( status ) {
		case 'awaiting-checkout':
			return _x( 'Complete your purchase', 'user', 'nelio-ab-testing' );
		case 'done':
			return _x( 'Purchase complete!', 'text', 'nelio-ab-testing' );
		case 'error':
			return _x( 'Error', 'text', 'nelio-ab-testing' );
	}
};