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

import { TextStyles } from '../Styles'
import { colors } from '../Colors'
import { NetworkError } from '../components/useNetwork'
import { Strings } from '../i18n'
import Headphones from '../icons/Headphones'

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' : 'unknown'

  return (
    <ScrollView
      refreshControl={refreshControl}
      style={{ flex: 1 }}
      contentContainerStyle={{
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingHorizontal: 40,
      }}
    >
      <Text
        style={{
          ...TextStyles.h4,
          color: colors.white,
          textAlign: 'center',
          marginBottom: 48,
        }}
      >
        {Strings.ErrorTexts[errorKey].title}
      </Text>
      <Headphones />
      <Text
        style={{
          ...TextStyles.tiny,
          textAlign: 'center',
          marginTop: 35,
        }}
      >
        {Strings.ErrorTexts[errorKey].body}
      </Text>
      {error.type === 'service' && (
        <Text
          style={{
            ...TextStyles.micro,
            textAlign: 'center',
            marginTop: 20,
          }}
        >
          Error ({error.status}): {error.eventId}
        </Text>
      )}
    </ScrollView>
  )
}