import { __ } from '@wordpress/i18n';
import { useSettings } from '../../contexts/SettingsContext';
import { getAdminPageUrl, getLimit, getPublicUrl, getVendorDashboardUrl, isVendorPage } from '../../Helpers';
import { showUpgradePopup } from '../../utils/upgrade';
import Pane, { animationClass } from './Pane';

const TEXT_DOMAIN = 'stock-sync-with-google-sheet-for-woocommerce';

// Step 5: first sync (screen 1) and "Congratulations" (screen 2). Port of step-5.php.
const Step5Sync = ( { isFirstScreen, direction, syncing, onSync, spreadsheetUrl } ) => {
	const { isPro } = useSettings();
	const vendor = isVendorPage();
	const limit = getLimit();

	if ( isFirstScreen ) {
		return (
			<Pane direction={ direction }>
				<div className="sync-google-sheet active">
					<div className="content text-center">
						<figure className="media">
							<img src={ `${ getPublicUrl() }/images/recycling.svg` } alt="" />
						</figure>
						<h3 className="title">{ __( 'Sync with Google Sheet', TEXT_DOMAIN ) }</h3>
						<div className="description">
							<p>{ __( 'You’re almost ready. Press this button to sync your WooCommerce products with Google Sheet.', TEXT_DOMAIN ) }</p>
						</div>
						<button
							type="button"
							className={ `ssgs-btn flex-button${ syncing ? ' disabled' : '' }` }
							onClick={ onSync }
							disabled={ syncing }
							aria-busy={ syncing }
						>
							{ syncing ? (
								<span className="ssgsw-btn-busy">
									<span className="ssgsw-spinner" aria-hidden="true"></span>
									{ __( 'Syncing', TEXT_DOMAIN ) }
								</span>
							) : (
								<span>{ __( 'Sync with Google Sheet', TEXT_DOMAIN ) }</span>
							) }
						</button>
					</div>
				</div>
			</Pane>
		);
	}

	return (
		<Pane direction={ direction }>
			<div className={ `congratulations${ animationClass( direction ) }` }>
				<div className="content text-center">
					<figure className="media">
						<img src={ `${ getPublicUrl() }/images/congratulations.svg` } alt="" />
					</figure>
					<h3 className="title">{ __( 'Congratulations', TEXT_DOMAIN ) }</h3>
					<div className="description">
						<p>{ __( 'Your products have been successfully synced to Google Sheet', TEXT_DOMAIN ) }</p>
					</div>

					<div className="ssgs-btn-group">
						<a href={ vendor ? getVendorDashboardUrl() : getAdminPageUrl() } className="ssgs-btn border">
							{ __( 'Go to Dashboard', TEXT_DOMAIN ) }
						</a>
						<a href={ spreadsheetUrl } target="_blank" rel="noreferrer" className="ssgs-btn">
							{ __( 'View on Google Sheet', TEXT_DOMAIN ) }
						</a>
					</div>

					{ vendor ? (
						<p>
							{ __( 'All products can be synced with your current plan.', TEXT_DOMAIN ) }
						</p>
					) : (
						<>
							<p>
								<span className="ssgs-badge aliceblue">
									{ limit ? <span>{ __( 'Only', TEXT_DOMAIN ) } </span> : null }
									<strong>
										{ limit || 'All' } { __( 'products', TEXT_DOMAIN ) }
									</strong>{ ' ' }
									{ __( 'can be synced with your current plan', TEXT_DOMAIN ) }
								</span>
							</p>
							{ ! isPro && (
								<div className="profeatures">
									<p>
										<img src={ `${ getPublicUrl() }/images/gift.svg` } alt="" />
										<button type="button" className="ssgsw-promo ssgsw-react-link-button" onClick={ showUpgradePopup }>
											{ __( 'Unlock premium features', TEXT_DOMAIN ) }
										</button>
									</p>
								</div>
							) }
						</>
					) }
				</div>
			</div>
		</Pane>
	);
};

export default Step5Sync;