import React from 'react'
import { ScrollView, RefreshControlProps } from 'react-native'

import { NetworkError } from '../hooks/useNetwork'
import { Strings } from '../i18n'
import { NotificationView } from './NotificationView'

export const Error: React.FC<{
  error: NetworkError
  refreshControl?: React.ReactElement<RefreshControlProps>
}> = ({ error, refreshControl }) => {
  // Coalesce app and service errors into generic 'unknown' error for the user
  const errorKey =
    error.type === 'offline'
      ? 'offline'
      : error.type === 'service' && error.status === 504
      ? 'timeout'
      : 'unknown'

  const errorText = Strings.ErrorTexts[errorKey]
  return (
    <ScrollView
      refreshControl={refreshControl}
      style={{ flex: 1 }}
      contentContainerStyle={{
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <NotificationView
        title={errorText.title}
        body={errorText.body ?? undefined}
        buttonText={Strings.Shared.TryAgain}
        onPressButton={() => refreshControl?.props.onRefresh?.()}
        type="error"
        additionalText={
          error.type === 'service'
            ? `Error (${error.status}): ${error.eventId}`
            : undefined
        }
      />
    </ScrollView>
  )
}