import React from 'react';
import {Feather} from '@expo/vector-icons';

//Pacote Linking utilizado para fazer a chamada do app whatsapp
import {View, Image, TouchableOpacity, Text, Linking} from 'react-native';
import {useNavigation, useRoute} from '@react-navigation/native';
import logoImg from '../../assets/logo.png';

//Pacote utilizado para a chamada do app gmail
import * as MailComposer from 'expo-mail-composer';

import styles from './styles';

export default function Detail() {
    //Análogo ao useHistory para navegação entre as rotas no react
    const navigation = useNavigation();
    const route = useRoute();

    //Pegando o current incident enviado pela function navigateToDetail no Incidents/index.js
    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 navegar para página anterior
    function navigateBack(){
        navigation.goBack()
    }

    function senMail(){
        MailComposer.composeAsync({
            subject: `Herói do caso: ${incident.title}`,
            recipients: [incident.email],
            body: message,
        })
    }

    function sendWhatsapp(){
        Linking.openURL(`whatsapp://send?phone=${incident.whatsapp}&text=${message}`);
    }   

    return(
        <View style={styles.container}>
            <View style={styles.header}>
                <Image source={logoImg}/>
                <TouchableOpacity onPress={navigateBack}>
                    <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.incidentValue}>{incident.name} de {incident.city}/{incident.uf}</Text>

                <Text style={styles.incidentProperty}>CASO:</Text>
                <Text style={styles.incidentValue}>{incident.title}</Text>

                <Text style={styles.incidentProperty}>VALOR:</Text>
                <Text style={styles.incidentValue}>
                    {
                        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 heroí 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={senMail}>
                        <Text style={styles.actionText}>E-mai</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    );
}