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

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

/**
 * Internal dependencies
 */
import { Invoice } from '../invoice';
import './style.scss';

export type BillingProps = {
	readonly billingSessionNonce: string;
};

export const Billing = ( {
	billingSessionNonce,
}: BillingProps ): JSX.Element | null => {
	const isVisible = useIsVisible();
	const isLoading = useIsLoading();
	const invoices = useInvoices();
	const isLocked = useIsLocked();
	const subscriptionId = useSubscriptionId();
	const billingSessionUrl = useBillingSessionUrl(
		subscriptionId,
		billingSessionNonce
	);

	if ( ! isVisible ) {
		return null;
	}

	return (
		<div className="nab-account-container__box nab-billing">
			<h3 className="nab-billing__title">
				{ _x( 'Billing History', 'text', 'nelio-ab-testing' ) }
				{ isLoading && <Spinner /> }
			</h3>

			{ ! isLoading && (
				<>
					<Button
						className="nab-billing__action"
						disabled={ isLocked }
						variant="link"
						onClick={ () => {
							const tab = window.open(
								billingSessionUrl,
								'_blank'
							);
							if ( tab ) {
								tab.opener = null;
								return;
							}
							window.location.assign( billingSessionUrl );
						} }
					>
						{ _x( 'Manage Payments', 'user', 'nelio-ab-testing' ) }
					</Button>

					<table className="nab-billing__container">
						<thead>
							<tr>
								<th className="nab-billing__reference">
									{ _x(
										'Invoice Reference',
										'text (account, billing table title)',
										'nelio-ab-testing'
									) }
								</th>
								<th className="nab-billing__date">
									{ _x(
										'Date',
										'text (account, billing table title)',
										'nelio-ab-testing'
									) }
								</th>
								<th className="nab-billing__total">
									{ _x(
										'Total',
										'text (account, billing table title)',
										'nelio-ab-testing'
									) }
								</th>
							</tr>
						</thead>

						<tbody className="invoice-list">
							{ invoices.map( ( invoice ) => (
								<Invoice
									key={ invoice.reference }
									{ ...invoice }
								/>
							) ) }
						</tbody>
					</table>
				</>
			) }
		</div>
	);
};

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

const useIsVisible = () =>
	useSelect( ( select ) => {
		const { getMode, isAgency, isAgencyFullViewEnabled } =
			select( NAB_ACCOUNT );

		const isSubscribed = getMode() === 'regular';
		const isAgencySummary = isAgency() && ! isAgencyFullViewEnabled();
		return isSubscribed && ! isAgencySummary;
	}, [] );

const useIsLoading = () =>
	useSelect(
		( select ) =>
			! select( NAB_ACCOUNT ).hasFinishedResolution( 'getInvoices', [
				select( NAB_ACCOUNT ).getSubscriptionId(),
			] ),
		[]
	);

const useInvoices = () =>
	useSelect(
		( select ) =>
			select( NAB_ACCOUNT ).getInvoices(
				select( NAB_ACCOUNT ).getSubscriptionId()
			),
		[]
	);

const useIsLocked = () =>
	useSelect( ( select ) => select( NAB_ACCOUNT ).isLocked(), [] );

const useSubscriptionId = () =>
	useSelect( ( select ) => select( NAB_ACCOUNT ).getSubscriptionId(), [] );

const useBillingSessionUrl = (
	subscriptionId: string,
	billingSessionNonce: string
) =>
	useSelect(
		( select ) =>
			select( NAB_DATA ).getAdminUrl( 'admin-post.php', {
				action: 'nab_create_billing_session',
				subscription: subscriptionId,
				_wpnonce: billingSessionNonce,
			} ),
		[ subscriptionId, billingSessionNonce ]
	);