import React from 'react'
import { Text } from 'react-native'

import { Colors } from '../Colors'
import { LoginProgress } from '../constants/LoginProgress'
import { Strings } from '../i18n'

const ErrorMessage: React.FC<{ errorMessage: string }> = ({ errorMessage }) => (
  <Text
    style={{
      color: Colors.text,
      textAlign: 'center',
      marginHorizontal: 22,
    }}
  >
    {errorMessage}
  </Text>
)

export const LoginErrorMessage: React.FC<{
  error: Error
  loading: LoginProgress
}> = ({ error, loading }) => {
  if (error.name !== 'LoginError') return null
  const errorMessage =
    error.message ??
    `${Strings.Shared.PleaseTryAgain} ${''.padEnd(loading, '.')}`
  return (
    <ErrorMessage
      errorMessage={`${Strings.Shared.LoginFailed}, ${errorMessage}`}
    />
  )
}