import { useNavigation } from '@react-navigation/native';
import React, { useState, useEffect } from 'react';
import {Picker, Image, TextInput, AsyncStorage, Modal, Alert, Linking, Text, TouchableOpacity, View } from 'react-native';
import SwipeableRow from '../../Linhas/Pagar';
import api from '../../../services/api';
import url from '../../../services/url';
import { styles } from './styles';
import { showMessage, hideMessage } from "react-native-flash-message";
import { AntDesign, MaterialIcons, MaterialCommunityIcons, EvilIcons, Ionicons } from '@expo/vector-icons';
import * as ImagePicker from 'expo-image-picker';


interface DadosProps {
    data: {
        id: string;
        pessoa: string;
        descricao: string;
        valor: string;
        data_lanc: string;
        data_venc: string;
        data_pgto: string;
        usuario_lanc: string;
        usuario_pgto: string;
        frequencia: string;
        saida:string;
        arquivo:string;
        pago:string;
        descricaoF:string;
        card: string;
        icone: string;
        banco_pessoa: string;
        tipo_banco_pessoa: string;
        agencia_pessoa: string;
        conta_pessoa: string;
        pix_pessoa: string;
        tipo_pessoa: string;
        tumb: string;
        total_comissoes: string;
    }
}

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

    return (
        <>
            {data.id === undefined && data.valor === undefined ?
               
               <Text style={{ color: '#595858', fontSize: 14, marginTop:10, alignContent:"center", textAlign:"center" }}>Nenhum Registro Encontrado!</Text>
                
                :

                <View
                    style={{
                        backgroundColor: '#FAFAFA',
        marginBottom: 10,
        padding: 10,
        marginHorizontal: 10,
        borderRadius: 5,
        borderLeftWidth: 8,
        borderLeftColor: data.card,
                    }}>
                                           
                       <TouchableOpacity
                            onPress={() => {
                                setAbrirModal(true)
                            }}
                        >
                            {(() => { 
                                if(data.pessoa != 'Sem Registro'){
                            return(<Text style={styles.Cliente}>{data.descricao} - <Text style={styles.NomePessoa}>({data.pessoa})</Text></Text>)
                            }else{
                                return(<Text style={styles.Cliente}>{data.descricao}</Text>)
                            }
                            })()} 
                            <Text style={styles.Valor}>R$ {data.valor}</Text>

                            <View style={styles.Section}>
                                <MaterialIcons style={styles.Icon} name="date-range" size={22} color="#c1c1c1" />

                                {(() => { if(data.pago != 'Sim'){
                                    return(<Text style={styles.Entrada}>Pagar Em: {data.data_venc}</Text>)
                                }else{
                                    return(<Text style={styles.Entrada}>Pago Em: {data.data_pgto}</Text>)
                                }                                
                                })()}  

                                

                                {(() => { if(data.tumb != 'sem-foto.png'){
                                    return(<Image style={styles.Vencimento2} source={{uri:(url +'sistema/painel/images/contas/'+ data.tumb)}} />)
                                } })()}                                

                                
                            </View>

                        </TouchableOpacity>
                    
                </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.descricao}</Text>
                

                <View style={styles.Section}>
                    <MaterialIcons style={styles.Icon} name="money" size={22} color="#c1c1c1" />
                    <Text style={styles.EntradaValor}>R$ {data.valor} - {data.saida}</Text>
                    {(() => { if(data.pessoa != 'Sem Fornecedor'){ return( 
                    <Text style={styles.Vencimento}>{data.tipo_pessoa} {data.pessoa}</Text>
                    )} })()}
                </View>

                

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

                <View style={styles.Section}>
                    <MaterialIcons style={styles.Icon} name="people-outline" size={22} color="#c1c1c1" />
                    <Text style={styles.Entrada}>Cadastro: {data.usuario_lanc}</Text>
                    {(() => { if(data.usuario_pgto != ''){ return( 
                    <Text style={styles.Vencimento}>Baixa: {data.usuario_pgto}</Text>
                    )} })()}
                    </View>

                <View style={styles.Section}>
                    <MaterialIcons style={styles.Icon} name="date-range" size={22} color="#c1c1c1" />
                    <Text style={styles.Entrada}>Frequência: {data.frequencia}</Text>
                    <Text style={styles.Vencimento}>Pago: {data.pago}</Text>                    
                </View>

                <View style={styles.Section}>
                    <MaterialIcons style={styles.Icon} name="money-off" size={22} color="#c1c1c1" />
                    <Text style={styles.Entrada}>Banco: {data.banco_pessoa}</Text>
                    <Text style={styles.Vencimento}>Tipo: {data.tipo_banco_pessoa}</Text>                    
                </View>

                <View style={styles.Section}>
                    <MaterialIcons style={styles.Icon} name="money-off" size={22} color="#c1c1c1" />
                    <Text style={styles.Entrada}>Agencia: {data.agencia_pessoa}</Text>
                    <Text style={styles.Vencimento}>Conta: {data.conta_pessoa}</Text>                    
                </View>

                <View style={styles.Section}>
                    <MaterialIcons style={styles.Icon} name="monetization-on" size={22} color="#c1c1c1" />
                    <Text style={styles.Entrada}>Pix: {data.pix_pessoa}</Text>
                                     
                </View>

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

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



        </>
    );
}

export default CardClientes;