/**
 * ConnectionRetryDialog component
 * @function TheConnectionRetryDialog
 */
'use strict'

import React from 'react'
import { TheButton, TheButtonGroup, TheDialog, TheIcon } from 'the-components'

/** @lends TheConnectionRetryDialog */
function TheConnectionRetryDialog({
  active,
  busy,
  l,
  lead,
  onClose,
  onReload,
  reloadIcon = null,
  submitText,
  title,
  warningIcon = null,
}) {
  if (!active) {
    return null
  }
  if (!!l) {
    console.warn(`[TheConnectionRetryDialog] Passing l is now deprecated`)
  }
  return (
    <TheDialog
      lead={lead || l('messages.CONNECTION_SEEMS_TO_BE_LOST')}
      onClose={onClose}
      present={active}
      spinning={busy}
      title={
        <span>
          <TheIcon className={warningIcon} />
          {title || l('titles.CONNECTION_RETRY_TITLE')}
        </span>
      }
    >
      <br />
      <TheButtonGroup>
        <TheButton icon={reloadIcon} onClick={onReload}>
          {submitText || l('buttons.DO_RELOAD')}
        </TheButton>
      </TheButtonGroup>
    </TheDialog>
  )
}

export default TheConnectionRetryDialog