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;
        tumb: string;
    }
}


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

    const [abrirModalParc, setAbrirModalParc] = useState(false);
    const [lista_freq, setListaFreq] = useState<any[]>([]);
    const [frequencia, setFrequencia] = useState("Mensal");
    const [parcela, setParcela] = useState("");
    const [valor, setValor] = useState("");

    async function selectListaFreq() {
        try {
            const response = await api.get('api/pagar/listar_freq.php');

            setListaFreq(response.data.resultado);
        } catch (error) {
            console.log(error);
        }
    }

    const [idConta, setIdConta] = useState("");
    const [nomeConta, setNomeConta] = useState("");

    const [abrirModalArquivo, setAbrirModalArquivo] = useState(false);
    const [nomeArquivo, setNomeArquivo] = useState("");

    const [image, setImage] = useState<any>();
    const [nomeImagem, setNomeImagem] = useState("");
    

    const pickImage = async () => {
        let result = await ImagePicker.launchCameraAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1,

        });

        if (result.cancelled) {
            return;
        }


        let localUri = result.uri;
        let filename: any = localUri.split('/').pop();
        setNomeImagem(filename);


        let match = /\.(\w+)$/.exec(filename);
        let type = match ? `image/${match[1]}` : `image`;


        let formData = new FormData();
        formData.append('photo', { uri: localUri, name: filename, type });
        setImage(result.uri);

        await api.post("api/pagar/upload.php", formData);


    };


    const pickImageArquivos = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1,


        });

        if (result.cancelled) {
            return;
        }


        let localUri = result.uri;
        let filename: any = localUri.split('/').pop();
        setNomeImagem(filename);


        let match = /\.(\w+)$/.exec(filename);
        let type = match ? `image/${match[1]}` : `image`;

        let formData = new FormData();
        formData.append('photo', { uri: localUri, name: filename, type });
        setImage(result.uri);

        await api.post("api/pagar/upload.php", formData);


    };



    async function arquivo(nome:string, id:string) {
        
        const user = await AsyncStorage.getItem('@user'); 
        setAbrirModalArquivo(true);
        setIdConta(id); 
        setNomeConta(nome);    
    }

    async function salvarArquivo() {
        const user = await AsyncStorage.getItem('@user');     
        
        if (nomeArquivo == "" || image == "") {
            showMessage({
                message: "Erro ao Salvar",
                description: 'Preencha o Nome e insira uma Foto!',
                type: "warning",
            });
            return;
        }

        try {
            const obj = {
                id: idConta,
                nomeArquivo: nomeArquivo,
                nomeImagem: nomeImagem,
                user: user,
                
            }

            const res = await api.post("api/pagar/salvar-arquivo.php", obj);

            if (res.data.sucesso === false) {
                showMessage({
                    message: "Erro ao Salvar",
                    description: res.data.mensagem,
                    type: "warning",
                    duration: 3000,
                });

                return;
            }

            
            showMessage({
                message: "Salvo com Sucesso",
                description: "Registro Salvo",
                type: "success",
                duration: 800,
            });

            setAbrirModalArquivo(false);
            setNomeArquivo("");
            setNomeImagem("");
            setImage(null);
           

        } catch (error) {
            Alert.alert("Ops", "Alguma coisa deu errado, tente novamente.");
           
        }

        
          
    }


    
    
    async function excluir(nome:string, id:string) {
        const user = await AsyncStorage.getItem('@user'); 
        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(`api/pagar/excluir.php?id=${id}&user=${user}&nome=${nome}`);

                        if (response.data.sucesso === false) {
                            showMessage({
                                message: "Erro ao Excluir",
                                description: response.data.mensagem,
                                type: "warning",
                                duration: 3000,
                            });
            
                            return;
                        }

                        showMessage({
                            message: "Excluído Sucesso",
                            description: "Registro Excluído",
                            type: "info",
                            duration: 800,
                        });

                        navigation.push('Pagar');
                    } catch (error) {
                        Alert.alert('Não foi possivel excluir, tente novamente!')
                    }
                }
            }
        ])
    }



    async function baixar(nome:string, id:string, saida:string) {
        const user = await AsyncStorage.getItem('@user'); 
        Alert.alert('Sair', `Você tem certeza que deseja dar baixa total nesta conta : ` + nome + ` com saída em ` + saida, [
            {
                text: 'Não',
                style: 'cancel',
            },

            {
                text: 'Sim',
                onPress: async () => {
                    try {
                        const response = await api.get(`api/pagar/baixar.php?id=${id}&user=${user}&nome=${nome}`);

                        if (response.data.sucesso === false) {
                            showMessage({
                                message: "Erro ao Baixar",
                                description: response.data.mensagem,
                                type: "warning",
                                duration: 3000,
                            });
            
                            return;
                        }

                        showMessage({
                            message: "Baixado com Sucesso",
                            description: "Registro Baixar",
                            type: "info",
                            duration: 800,
                        });

                        navigation.push('Pagar');
                    } catch (error) {
                        Alert.alert('Não foi possivel baixar, tente novamente!')
                    }
                }
            }
        ])
    }


    async function modalParcelar(id_reg:string) {   
        setIdConta(id_reg);    
        try {   
                //setLoading(true);
                const res = await api.get(`api/pagar/listar_id.php?id=${id_reg}`);
                setValor(res.data.dados.valor);
                selectListaFreq();
                setAbrirModalParc(true);
                //setLoading(false);
                              
                           
        } catch (error) {
            console.log('Error ao carregar os Dados');
        }
    }



    async function gerarParcelas() {        
        const user = await AsyncStorage.getItem('@user');
        try {
        const obj = {
            id: idConta,
            parcelas: parcela,            
            frequencia: frequencia,
            user: user
          }

        const res = await api.post("api/pagar/parcelar.php", obj);

        if (res.data.sucesso === false) {
            showMessage({
                message: "Erro ao Salvar",
                description: res.data.mensagem,
                type: "warning",
            });

            return;
        }
        
        
        setFrequencia("Mensal");
        setParcela("");
             
        showMessage({
            message: "Parcelado",
            description: 'Parcelado com Sucesso!!',
            type: "success",
        });        

        setAbrirModalParc(false);  
        navigation.push('Pagar');      

    } catch (error) {
        Alert.alert("Ops", "Alguma coisa deu errado, tente novamente.");
       
    }
    }


   
    

    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,
        paddingHorizontal: 5,
        marginHorizontal: 10,
        borderRadius: 5,
        borderLeftWidth: 8,
        borderLeftColor: data.card,
                    }}>
                    <SwipeableRow
                        onPressWhatsapp={async () => {
                            baixar(data.descricao, data.id, data.saida);                                                       
                        }}

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

                        onPressDelete={async () => {
                            excluir(data.descricao, data.id);
                        }}

                        onPressArquivo={async () => {
                            arquivo(data.descricao, data.id);
                        }}

                        onPressParcelar={async () => {
                            modalParcelar(data.id)
                        }}

                    >
                       
                       <TouchableOpacity
                            onPress={() => {
                                setAbrirModal(true)
                            }}
                        >

                            <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" />
                                <Text style={styles.Entrada}>{data.frequencia} - {data.saida}</Text>

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

                                <Text style={styles.VencimentoHoraCard}>{data.data_venc}</Text>
                            </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.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}>Fornecedor: {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="data-usage" size={22} color="#c1c1c1" />
                    <Text style={styles.Entrada}>Frequência: {data.frequencia}</Text>
                    <Text style={styles.Vencimento}>Pago: {data.pago}</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 +'painel/images/contas/'+ data.tumb)}} />
                                    <Text style={styles.textoAbrir}>(Clique para Abrir)</Text>
                                    </View>
                                )
                                                   
                        }
                        
                    })()}
                    </TouchableOpacity>               

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




                           
<Modal 
        visible={abrirModalArquivo}
        animationType={'fade'}
        transparent={true}
        onRequestClose={() => {
          setAbrirModalArquivo(!abrirModalArquivo)
        }}
      >
          <View style={styles.centralizarModal}>
         <View style={styles.CardContainerModal}>
         <TouchableOpacity
              style={styles.removeItem}
              onPress={() => setAbrirModalArquivo(false)}
            >
              <EvilIcons name="close" size={25} color="black" />
            </TouchableOpacity>
         <Text style={styles.Cliente}>Descrição: {nomeConta}</Text>
                
         <View>
                
                <TextInput
                    placeholder="Nome Arquivo*"
                    onChangeText={(text) => setNomeArquivo(text)}
                    value={nomeArquivo}
                    style={styles.TextInput}
                />

                
            </View>



            <View style={{ flexDirection: 'row', justifyContent: 'space-between', width: '90%', alignSelf: "center", marginTop: 20 }}>
                    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

                        <TouchableOpacity onPress={pickImage}>
                            <Ionicons name="camera" size={80} color="#706f6f" />
                        </TouchableOpacity>

                    </View>

                    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                        <TouchableOpacity onPress={pickImageArquivos}>
                            <Ionicons name="archive" size={80} color="#706f6f" />
                        </TouchableOpacity>

                    </View>
                </View>

                <View style={{alignItems: 'center', justifyContent: 'center', marginTop: 10 }}>
                    {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
                </View>

                <TouchableOpacity
                    style={styles.Button}
                    onPress={() => {                        
                        salvarArquivo();
                    }}
                >
                    <Text style={styles.ButtonText}>Inserir Arquivo</Text>
                </TouchableOpacity>
                                           

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



          <Modal 
        visible={abrirModalParc}
        animationType={'fade'}
        transparent={true}
        onRequestClose={() => {
          setAbrirModalParc(!abrirModalParc)
        }}
      >
          <View style={styles.centralizarModal}>
         <View style={styles.CardContainerModal}>
         <TouchableOpacity
              style={styles.removeItem}
              onPress={() => setAbrirModalParc(false)}
            >
              <EvilIcons name="close" size={25} color="black" />
            </TouchableOpacity>
            <Text style={styles.tituloModal}>Parcelar Conta - Valor: {valor}</Text>
            

            <View>
                    <Text style={styles.TitleInputs2}>Parcelas *</Text>

                    <TextInput
                        placeholder="Número de Parcelas "
                        onChangeText={(text) => setParcela(text)}
                        value={parcela}
                        style={styles.TextInput}
                        keyboardType='numeric'
                    />
                </View>
                

            <View>
                <Text style={styles.TitleInputs2}>Frequência</Text>
                <View style={styles.TextInput}>
                    <Picker
                        selectedValue={frequencia}
                        onValueChange={(itemValue, itemIndex) => setFrequencia(itemValue)}
                    >
                        
                        {lista_freq.map((item: any) =>
                            <Picker.Item key={item.dias} label={item.nome} value={item.dias} />
                        )}
                    </Picker>
                </View>
            </View>


            <TouchableOpacity
                style={styles.Button}
                onPress={() => {                   
                    gerarParcelas();                   
                }}
            >
                <Text style={styles.ButtonText}>Parcelar</Text>
            </TouchableOpacity>            

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



        </>
    );
}

export default CardClientes;