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

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

// Port of the removed templates/setup/footer.php.
const StepFooter = ( { currentStep, isFirstScreen, showPrevious, showNext, loadingNext, onPrevious, onNext } ) => (
	<div className="ssgs-tab__controls">
		{ [ 1, 4 ].includes( currentStep ) && (
			<div
				className="ssgs-progressbar"
				role="progressbar"
				aria-valuemin={ 0 }
				aria-valuemax={ 100 }
				aria-valuenow={ isFirstScreen ? 50 : 100 }
				aria-label={ __( 'Step progress', TEXT_DOMAIN ) }
			>
				<div className="ssgs-progressbar__percentage" style={ { width: `${ isFirstScreen ? 50 : 100 }%` } }></div>
			</div>
		) }

		<div className="float-left">
			{ showPrevious && (
				<button type="button" className="ssgs-btn border gray" onClick={ onPrevious }>
					{ __( 'Back', TEXT_DOMAIN ) }
				</button>
			) }
		</div>

		<div className="float-right">
			{ showNext && (
				<button
					type="button"
					className={ `ssgs-btn flex-button${ loadingNext ? ' disabled' : '' }` }
					onClick={ onNext }
					aria-busy={ loadingNext }
					disabled={ loadingNext }
				>
					{ loadingNext ? (
						<span className="ssgsw-btn-busy">
							<span className="ssgsw-spinner" aria-hidden="true"></span>
							{ __( 'Please wait.', TEXT_DOMAIN ) }
						</span>
					) : (
						<span>{ __( 'Next', TEXT_DOMAIN ) }</span>
					) }
				</button>
			) }
		</div>
	</div>
);

export default StepFooter;