import { __ } from '@wordpress/i18n';
import Portal from './Portal';

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

// Centred sync progress dialog: spinner, title and a progress bar once batches report back.
const SyncProgress = ( { title, progress } ) => (
	<Portal>
		<div className="ssgsw-dialog-backdrop" role="presentation">
			<div className="ssgsw-dialog ssgsw-dialog--progress" role="dialog" aria-modal="true" aria-labelledby="ssgsw-sync-title" aria-busy="true">
				<span className="ssgsw-spinner ssgsw-spinner--lg" aria-hidden="true"></span>
				<h2 id="ssgsw-sync-title">{ title }</h2>
				{ progress === null ? (
					<p className="ssgsw-dialog__text">{ __( 'Syncing data to the sheet.', TEXT_DOMAIN ) }</p>
				) : (
					<div className="ssgsw-progress">
						<div
							className="ssgsw-progress__track"
							role="progressbar"
							aria-valuemin={ 0 }
							aria-valuemax={ 100 }
							aria-valuenow={ Number( progress ) }
							aria-label={ __( 'Sync progress', TEXT_DOMAIN ) }
						>
							<div className="ssgsw-progress__bar" style={ { width: `${ progress }%` } }></div>
						</div>
						<span className="ssgsw-progress__value">{ progress }%</span>
					</div>
				) }
				<p className="ssgsw-dialog__hint">{ __( 'Please wait...', TEXT_DOMAIN ) }</p>
			</div>
		</div>
	</Portal>
);

export default SyncProgress;