text: /**
   * Arquivo responsável pela exibição dos detalhes dos casos.
   * 
  */
  
  import React from 'react'
  import { Feather } from '@expo/vector-icons'
  import { useNavigation, useRoute } from '@react-navigation/native'
  import { View, Text, Image, TouchableOpacity, Linking } from 'react-native'
  import * as MailComposer from 'expo-mail-composer'
  
  import logoImg from '../../assets/logo.png'
  
  import styles from './styles'
  
  /**
   * Função responsável pela listagem dos detalhes dos casos. 
   * 
  */
  export default function Detail() {  
      
      const navigation = useNavigation()
      const route = useRoute()
      const incident = route.params.incident
      const message = `Olá ${incident.name}, estou entrando em contato pois gostaria de ajudar no caso "${incident.title}" com o valor de ${Intl.NumberFormat('pt-BR', {
          style: 'currency',
          currency: 'BRL',
        }).format(incident?.value)}`
  
      /**
       * Função para retornar a tela de casos.
       * 
      */
      function mavigateBack(){
          navigation.goBack()
      }
  
      /**
       * Função para o envio de mensagem dos detalhes do caso por Email.
       * 
      */
      function sendEmail(){
          MailComposer.composeAsync({
              subject: `Herói do caso: ${incident.title}`,
              recipients: [incident.email],
              body: message,
          })
      }
  
      /**
       * Função para o envio de mensagem dos detalhes do caso por WhatsApp.
       * 
       */
      function sendWhatsapp(){
          Linking.openURL(`whatsapp://send?phone=${incident.whatsapp}&text=${message}`)
      }
  
      return (
          <View style={styles.styles}>
              <View style={styles.header}>
                  <Image source={logoImg} />
  
                  <TouchableOpacity onPress={mavigateBack}>
                      <Feather name='arrow-left' size={28} color="#E82041" />
                  </TouchableOpacity>
              </View>
  
              <View style={styles.incident}>
                  <Text style={[styles.incidentProperty, { marginTop: 0}]}>ONG: </Text>
                  <Text style={styles.incidentProperty}>{incident.name} de {incident.city}/{incident.uf}</Text>
  
                      <Text style={styles.incidentProperty}>CASO: </Text>
                      <Text style={styles.incidentProperty}>{incident.title}</Text>
  
                      <Text style={styles.incidentProperty}>VALOR: </Text>
                      <Text style={styles.incidentProperty}>
                          {Intl.NumberFormat('pt-BR', { 
                              style:'currency', 
                              currency:'BRL' 
                          }).format(incident.value)}
                      </Text>
              </View>
  
              <View style={styles.contactBox}>
                  <Text style={styles.heroTitle}>Salve o dia!</Text>
                  <Text style={styles.heroTitle}>Seja o herói desse caso.</Text>
                  <Text style={styles.heroDescription}>Entre em contato</Text>
                  <View style={styles.actions}>
                      <TouchableOpacity style={styles.action} onPress={sendWhatsapp}>
                          <Text style={styles.actionText}>WhatsApp</Text>
                      </TouchableOpacity>
                      <TouchableOpacity style={styles.action} onPress={sendEmail}>
                          <Text style={styles.actionText}>E-mail</Text>
                      </TouchableOpacity>
                  </View>
              </View>
  
          </View>
      )
  }