import React from 'react';
import Portal from './Portal.jsx';

// Centred sync progress dialog: spinner, title, optional status line and a progress bar.
const SyncProgress = ({ title, progress, message }) => (
  <Portal>
    <div className="osgsw-dialog-backdrop" role="presentation">
      <div className="osgsw-dialog osgsw-dialog--progress" role="dialog" aria-modal="true" aria-labelledby="osgsw-sync-title" aria-busy="true">
        <span className="osgsw-spinner osgsw-spinner--lg" aria-hidden="true" />
        <h2 id="osgsw-sync-title">{title}</h2>
        {message && <p className="osgsw-dialog__text">{message}</p>}
        <div className="osgsw-progress">
          <div
            className="osgsw-progress__track"
            role="progressbar"
            aria-valuemin={0}
            aria-valuemax={100}
            aria-valuenow={Number(progress) || 0}
            aria-label="Sync progress"
          >
            <div className="osgsw-progress__bar" style={{ width: `${progress || 0}%` }} />
          </div>
          <span className="osgsw-progress__value">{progress || 0}%</span>
        </div>
        <p className="osgsw-dialog__hint">Please wait...</p>
      </div>
    </div>
  </Portal>
);

export default SyncProgress;