import { useI18n } from 'domains/i18n/hooks'
import { className } from 'lib/css'
import Error from 'ui/components/form-controls/error'
import { useFileUploads } from 'ui/hooks/seamly-hooks'

const UploadProgress = () => {
  const { t } = useI18n()
  const { currentUploads } = useFileUploads()

  return (
    <div className={className('progress')}>
      {currentUploads.map(({ id, name, progress, uploading, error }) => (
        <div key={id} className={className('progress_container')}>
          <div className={className('progress__text')}>
            <span className={className('progress__text--file-name')}>
              {name}
            </span>
            <span
              className={className('progress__text--percentage')}
            >{`${progress}%`}</span>
          </div>
          <Error error={error} id="progress-error" />
          <progress
            className={className('progress__bar')}
            role="progressbar"
            aria-valuemin={0}
            aria-valuemax={100}
            aria-label={t('fileUpload.srProgressLabel', { fileName: name })}
            max="100"
            aria-valuenow={progress}
            value={progress}
            aria-busy={uploading}
          >
            {`${progress}%`}
          </progress>
        </div>
      ))}
    </div>
  )
}

export default UploadProgress