import { useNavigation } from '@react-navigation/native';
import React from 'react';
import {Linking, Text, Modal, AsyncStorage, ActivityIndicator, FlatList, Image, TextInput, TouchableOpacity, View, Dimensions, Alert } from 'react-native';
import SwipeableRow from '../SwipeableRow';
import api from '../../services/api';
import url from '../../services/url';
import { styles } from './styles';
import fonts from "../../styles/fonts";
import { MaterialIcons, EvilIcons, Ionicons } from '@expo/vector-icons';
import { useState } from 'react';
import { showMessage, hideMessage } from "react-native-flash-message";

interface DadosProps {
    data: {
        id: string;
        nome: string;
        telefone: string;
        email: string;
        ativo: string;
        foto: string;
        cargo: string;
        cpf: string;
        endereco: string;
        dataCad: string;
        dataNasc: string;
        dataBat: string;
        estCivil: string;
    }
}


const CardClientes = ({ data }: DadosProps) => {
    const navigation: any = useNavigation();
    const [abrirModal, setAbrirModal] = useState(false);


    async function excluir(nome:string, id:string) {
        Alert.alert('Sair', `Você tem certeza que deseja excluir o Registro : ` + nome, [
            {
                text: 'Não',
                style: 'cancel',
            },

            {
                text: 'Sim',
                onPress: async () => {
                    try {
                        const response = await api.get(`apiIgreja/membros/excluir.php?id=${id}`);
                        navigation.push('Pessoas');
                         showMessage({
                            message: "Membro Excluído",
                            description: 'Exclusão efetuada com Sucesso!!',
                            type: "info",
                        });
                    } catch (error) {
                        Alert.alert('Não foi possivel excluir, tente novamente!')
                    }
                }
            }
        ])
    }
    
    return (
        <>
            {data.id === undefined || data.nome === undefined ?
              
              <Text style={{ color: '#595858', fontSize: 14, marginTop:10, alignContent:"center", textAlign:"center" }}>Nenhum Registro Encontrado!</Text>
                                             
                :

                <View>
                    <SwipeableRow
                        onPressWhatsapp={async () => {
                            await Linking.openURL(`http://api.whatsapp.com/send?1=pt_BR&phone=55${data.telefone}`)
                        }}

                        onPressEdit={async () => {
                            navigation.push('NovaPessoa', { id_reg: data.id });
                        }}

                        onPressDelete={async () => {
                            excluir(data.nome, data.id);
                        }}
                    >
                        <TouchableOpacity
                            style={styles.box}
                            onPress={() => setAbrirModal(true)}
                        >
                           <View style={{flex:1, flexDirection:'row', justifyContent:'space-between', marginTop:-5}}>
                             
                             {(() => {
                                 if (data.ativo == 'Sim') {
                                     return(
                              <View style={{width:65}}>
                              <Image style={{width:50, height:50, }} source={{uri:(url +'sistema/img/membros/'+ data.foto)}} />
                              </View>
                               )
                             }else{
                                 return(
                                     <View style={{width:65}}>
                                     <Image style={{width:50, height:50, opacity:0.3,  }} source={{uri:(url +'sistema/img/membros/' + data.foto)}} />
                                     </View>
                                      )
                                     }
                             })()}
 
 
                              {(() => {
                                 if (data.ativo == 'Sim') {
                                     return(
                                         <View style={{width:'100%', marginTop:3}}>
                                         <Text style={{ color: '#000', fontSize:17, fontFamily: fonts.text }}>{data.nome}</Text>
                                         <Text style={{ color: '#000' }}>{data.telefone} - Cargo: {data.cargo}</Text>
                                         </View>
                                     )
                                 }else{
                                     return(
                                         <View style={{width:'100%', marginTop:3}}>
                                         <Text style={{ color: '#bfbfbf', fontSize:17, fontFamily: fonts.text }}>{data.nome}</Text>
                                         <Text style={{ color: '#bfbfbf' }}>{data.telefone} - Cargo: {data.cargo}</Text>
                                         </View>
                                     )
                                 }
                             })()}
 
                            
                             </View>
                           
                        </TouchableOpacity>
                    </SwipeableRow>
                </View>
            }


<Modal 
        visible={abrirModal}
        animationType={'fade'}
        transparent={true}
        onRequestClose={() => {
          setAbrirModal(!abrirModal)
        }}
      >
          <View style={styles.centralizarModal}>
         <View style={styles.CardContainerModal}>
         <TouchableOpacity
              style={styles.removeItem}
              onPress={() => setAbrirModal(false)}
            >
              <EvilIcons name="close" size={25} color="black" />
            </TouchableOpacity>
         <Text style={styles.Cliente}>{data.nome}</Text>
                

                <View style={styles.Section}>
                    <MaterialIcons style={styles.Icon} name="contact-phone" size={22} color="#c1c1c1" />
                    <Text style={styles.Entrada}>{data.telefone}</Text>
                    <Text style={styles.Vencimento}>CPF: {data.cpf}</Text>
                </View>

                

                <View style={styles.Section}>
                    <MaterialIcons style={styles.Icon} name="date-range" size={22} color="#c1c1c1" />
                    <Text style={styles.Entrada}>Cadastro: {data.dataCad}</Text>
                    <Text style={styles.Vencimento}>Nascimento: {data.dataNasc}</Text>
                </View>

                <View style={styles.Section}>
                    <MaterialIcons style={styles.Icon} name="date-range" size={22} color="#c1c1c1" />
                    <Text style={styles.Entrada}>Batismo: {data.dataBat}</Text>
                    <Text style={styles.Vencimento}>Estado Civil: {data.estCivil}</Text>
                </View>

                <View style={styles.Section}>
                    <MaterialIcons style={styles.Icon} name="mail" size={22} color="#c1c1c1" />
                    <Text style={styles.Entrada}>Email: {data.email}</Text>
                    
                </View>

                <View style={styles.Section}>
                    <MaterialIcons style={styles.Icon} name="location-city" size={22} color="#c1c1c1" />
                    <Text style={styles.Entrada}>Endereço: {data.endereco}</Text>
                    
                </View>

                <View style={styles.Footer}>
                    <Text style={styles.FooterText}>Cargo: <Text style={{ color: 'gray' }}>{data.cargo}</Text></Text>
                </View>

                <TouchableOpacity onPress={() => Linking.openURL(url + 'sistema/img/membros/' + data.foto)}>
                {(() => {
                        if (data.foto != 'sem-foto.jpg' && data.foto != '' && data.foto != null) {
                            
                                return (
                                    <View style={styles.viewImg}>
                                    <Image style={styles.ImagemModal} source={{uri:(url +'sistema/img/membros/'+ data.foto)}} />
                                    <Text style={styles.textoAbrir}>(Clique para Abrir)</Text>
                                    </View>
                                )
                                                   
                        }
                        
                    })()}
                    </TouchableOpacity>               

             </View>
             </View>
          </Modal>

        </>
    );
}

export default CardClientes;