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

/**
 * External dependencies
 */
import clsx from 'clsx';
import { noop } from 'lodash';
import { useCommercialOpportunity } from '@nab/data';

import type { CSSProperties, MutableRefObject } from 'react';

/**
 * Internal dependencies
 */
import './style.scss';
import { LoadingAnimation } from '../../loading-animation';
import { SiteId } from '@nab/types';

export type SubscribeModalProps = {
	readonly isDismissible: boolean;
	readonly isPageReady: boolean;
	readonly isOpen: boolean;
	readonly pageArgs: {
		readonly coupon: string;
		readonly period?: 'monthly' | 'yearly';
		readonly siteId?: SiteId;
	};
	readonly pageRef: MutableRefObject< null >;
	readonly pageHeight: number;
	readonly onClose: () => void;
	readonly onError: (
		message: string,
		hasLinkToPricingPage: boolean
	) => void;
};

export const SubscribeModal = ( {
	isDismissible,
	isPageReady,
	isOpen,
	pageArgs,
	pageRef,
	pageHeight,
	onClose,
	onError,
}: SubscribeModalProps ): JSX.Element | null => {
	const [ isIframeLoaded, setIsIframeLoaded ] = useState( false );
	const openingMessage = useOpeningMessage();

	useEffect( () => {
		if ( ! isIframeLoaded || isPageReady ) {
			return;
		}

		const timeoutId = window.setTimeout( () => {
			onError(
				_x(
					'Subscription plans are currently unavailable.',
					'text',
					'nelio-ab-testing'
				),
				true
			);
		}, 1000 );

		return () => {
			window.clearTimeout( timeoutId );
		};
	}, [ isIframeLoaded, isPageReady, onError ] );

	if ( ! isOpen ) {
		return null;
	}

	const isLoading = ! isPageReady;
	return (
		<Modal
			className={ clsx( 'nab-subscribe-modal', {
				'nab-subscribe-modal--is-ready': ! isLoading,
			} ) }
			title={ _x( 'Choose your plan', 'user', 'nelio-ab-testing' ) }
			shouldCloseOnClickOutside={ false }
			shouldCloseOnEsc={ false }
			onRequestClose={ isDismissible ? onClose : noop }
			isDismissible={ isDismissible }
		>
			{ isLoading && (
				<div>
					<LoadingAnimation />
					<div className="nab-subscribe-modal__loading-message">
						{ _x(
							'Loading available plans…',
							'text',
							'nelio-ab-testing'
						) }
					</div>
				</div>
			) }

			<div
				className={ clsx( 'nab-subscribe-modal__details', {
					'nab-subscribe-modal__details--is-ready': ! isLoading,
				} ) }
			>
				<div>{ openingMessage }</div>
				<iframe
					title={ _x(
						'Nelio A/B Testing Subscription Plans',
						'text',
						'nelio-ab-testing'
					) }
					ref={ pageRef }
					style={
						{
							'--nelio-subscribe-page-height': `${ pageHeight }px`,
						} as CSSProperties
					}
					className="nab-subscribe-modal__iframe"
					src={ addQueryArgs(
						'https://neliosoftware.com/testing/subscribe/',
						pageArgs
					) }
					onLoad={ () => setIsIframeLoaded( true ) }
				/>
			</div>
		</Modal>
	);
};

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

const useOpeningMessage = (): string => {
	const opportunity = useCommercialOpportunity();
	switch ( opportunity.type ) {
		case 'none':
			return _x(
				'Choose the plan that best fits your testing needs:',
				'user',
				'nelio-ab-testing'
			);

		case 'boost-expiring':
			return _x(
				'Choose a plan to keep testing without interruption when your boost ends:',
				'user',
				'nelio-ab-testing'
			);

		case 'low-quota':
			return _x(
				'Get more quota and keep your experiments collecting data:',
				'user',
				'nelio-ab-testing'
			);

		case 'quota-exhausted':
			return _x(
				'Choose a plan with more quota to start collecting data again:',
				'user',
				'nelio-ab-testing'
			);
	}
};