import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import clsx from 'clsx';

import './style.scss';

export const Nudge = ( {
	className,
	description,
	align = null,
	title = null,
	buttonText = null,
	visible = true,
	context = null,
	checkoutUrl = null,
	goToCheckoutPage = null,
	isRedirecting = false,
	showButton = true,
	target = '_top',
} ) => {
	const cssClasses = clsx( className, 'jetpack-upgrade-plan-banner', {
		'wp-block': context === 'editor-canvas',
		'block-editor-block-list__block': context === 'editor-canvas',
		'jetpack-upgrade-plan__hidden': ! visible,
	} );

	const redirectingText = __( 'Redirecting…', 'jetpack-shared-extension-utils' );

	return (
		<div className={ cssClasses } data-align={ align }>
			<div className="jetpack-upgrade-plan-banner__wrapper">
				{ title && (
					<strong className={ clsx( 'banner-title', { [ `${ className }__title` ]: className } ) }>
						{ title }
					</strong>
				) }
				{ description && (
					<span className={ `${ className }__description banner-description` }>
						{ description }
					</span>
				) }
				{ showButton && (
					<Button
						href={ isRedirecting ? null : checkoutUrl } // Only for server-side rendering, since onClick doesn't work there.
						onClick={ goToCheckoutPage }
						target={ target }
						className={ clsx( 'is-primary', {
							'jetpack-upgrade-plan__hidden': ! checkoutUrl,
						} ) }
						isBusy={ isRedirecting }
					>
						<span>{ isRedirecting ? redirectingText : buttonText }</span>
					</Button>
				) }
			</div>
		</div>
	);
};
