import { useNavigation } from '@react-navigation/native';
import React from 'react';
import {Picker, Linking, Text, Modal, AsyncStorage, ActivityIndicator, FlatList, Image, TextInput, TouchableOpacity, View, Dimensions, Alert } from 'react-native';
import SwipeableRow from '../SwipeableRowPat';
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;
        codigo: string;
        nome_usu_cad: string;
        data_cadF: string;
        nome_ig_cad: string;
        foto: string;
        nome_usu_emp: string;
        nome_ig_item: string;
        data_emprestimoF: string;
        valorF: string;
        ativo: string;
        obs: string;
        entrada: string;
        doador: string;
        classe_item: string;
        statusF: string;
        descricao: string;
        ig_cad: string;

    }
}


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

    const [lista_ig, setListaIg] = useState<any[]>([]);
    const [igreja, setIgreja] = useState("");

    const [id_pat, setIdPat] = useState("");


     async function selectListaIgrejas() {
        const id_igreja: any = await AsyncStorage.getItem('@id_igreja');

        try {
            const response = await api.get(`apiIgreja/pat/listar_igrejas.php?igreja=${id_igreja.replace(/['"]+/g, '')}`);

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


    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/pat/excluir.php?id=${id}`);
                        navigation.push('Patrimonios');
                        showMessage({
                            message: "Item Excluído",
                            description: 'Exclusão efetuada com Sucesso!!',
                            type: "info",
                        });
                    } catch (error) {
                        Alert.alert('Não foi possivel excluir, tente novamente!')
                    }
                }
            }
        ])
    }


    async function transf(id: string, igreja_item: string, nome:string, igreja_nome:string) {
        const id_igreja: any = await AsyncStorage.getItem('@id_igreja');
        const user: any = await AsyncStorage.getItem('@user');
                
        if(id_igreja.replace(/['"]+/g, '') != igreja_item){
            
            Alert.alert('Devolver Item', `Você tem certeza que deseja devolver o Item : ` + nome + ' para a igreja ' + igreja_nome, [
                {
                    text: 'Não',
                    style: 'cancel',
                },
    
                {
                    text: 'Sim',
                    onPress: async () => {
                        try {
                            const response = await api.get(`apiIgreja/pat/transf.php?id=${id}&igreja=${igreja_item}&user=${user}`);
                            navigation.push('Patrimonios');

                            showMessage({
                                message: "Item Devolvido",
                                description: 'Devolução efetuada com Sucesso!!',
                                type: "info",
                            });
                            
                        } catch (error) {
                            Alert.alert('Não foi possivel devolver, tente novamente!')
                        }
                    }
                }
            ])            

            return;
        }

        selectListaIgrejas();
        setAbrirModalTransf(true);
        setIdPat(id);
       
    }


    async function transferirItem() {
        
        const user: any = await AsyncStorage.getItem('@user');
       
        try {
            const response = await api.get(`apiIgreja/pat/transf.php?id=${id_pat}&igreja=${igreja}&user=${user}`);
            setAbrirModalTransf(false);
            navigation.push('Patrimonios');


            showMessage({
                                message: "Item Transferido",
                                description: 'Transferência efetuada com Sucesso!!',
                                type: "info",
                            });
        } catch (error) {
            console.log(error)
        }
    }
    

    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 () => {
                            transf(data.id, data.ig_cad, data.nome, data.nome_ig_cad);
                        }}

                        onPressEdit={async () => {
                            navigation.push('NovoPatrimonio', { 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/patrimonios/' + data.foto) }} />
                                            </View>
                                        )
                                    } else {
                                        return (
                                            <View style={{ width: 65 }}>
                                                <Image style={{ width: 50, height: 50, opacity: 0.3, }} source={{ uri: (url + 'sistema/img/patrimonios/' + data.foto) }} />
                                            </View>
                                        )
                                    }
                                })()}


                                {(() => {

                                    if (data.ativo == 'Sim') {
                                        return (
                                            <View style={{ width: '100%', marginTop: 3 }}>
                                                <Text style={{ color: data.classe_item, fontSize: 17, fontFamily: fonts.text }}>{data.nome} <Text style={{ fontSize: 13, }}>({data.codigo})</Text></Text>
                                                <Text style={{ color: '#000' }}>Pertence a {data.nome_ig_cad}</Text>
                                            </View>
                                        )
                                    } else {
                                        return (
                                            <View style={{ width: '100%', marginTop: 3 }}>
                                                <Text style={{ color: '#bfbfbf', fontSize: 17, fontFamily: fonts.text }}>{data.nome} <Text style={{ fontSize: 13, }}>({data.codigo})</Text></Text>
                                                <Text style={{ color: '#bfbfbf' }}>Pertence a {data.nome_ig_cad}</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}>
                            <Text style={styles.Entrada}>Código: {data.codigo}</Text>
                            <Text style={styles.Vencimento}>Valor: R$ {data.valorF}</Text>
                        </View>



                        <View style={styles.Section}>

                            <Text style={styles.Entrada}>Cadastro: {data.data_cadF}</Text>
                            <Text style={styles.Vencimento}>Por: {data.nome_usu_cad}</Text>
                        </View>

                        <View style={styles.Section}>
                            <Text style={styles.Entrada}>Status do Item: {data.statusF}</Text>
                            <Text style={styles.Vencimento}>Entrada: {data.entrada}</Text>
                        </View>

                        {(() => {
                            if (data.nome_usu_emp != 'Sem Empréstimo') {
                                return (
                                    <View style={styles.Section}>
                                        <Text style={styles.Entrada}>Emprestado Por {data.nome_usu_emp}</Text>
                                        <Text style={styles.Vencimento}>Data: {data.data_emprestimoF}</Text>
                                    </View>
                                )
                            }
                        })()}


                        {(() => {
                            if (data.doador != '') {
                                return (
                                    <View style={styles.Section}>
                                        <Text style={styles.Entrada}>Doado Por {data.doador}</Text>
                                    </View>
                                )
                            }
                        })()}

                        <View style={styles.Section}>
                            <Text style={styles.Entrada}>Item Pertencia a {data.nome_ig_cad}</Text>
                        </View>

                        <View style={styles.Section}>
                            <Text style={styles.Entrada2}>Item Atualmente com a {data.nome_ig_item}</Text>
                        </View>



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

                        <TouchableOpacity onPress={() => Linking.openURL(url + 'sistema/img/patrimonios/' + 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/patrimonios/' + data.foto) }} />
                                            <Text style={styles.textoAbrir}>(Clique para Abrir)</Text>
                                        </View>
                                    )

                                }

                            })()}
                        </TouchableOpacity>

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

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





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

                        <View style={styles.Cabecalho}>
                            <Text style={styles.CabecalhoText}>Transferir Item</Text>
                        </View>

                        <View>
                    
                    <View style={styles.TextInput}>
                        <Picker
                            selectedValue={igreja}
                            onValueChange={(itemValue, itemIndex) => setIgreja(itemValue)}
                        >

                            {lista_ig.map((item: any) =>
                                <Picker.Item key={item.id} label={item.nome} value={item.id} />
                            )}
                        </Picker>
                    </View>


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

                </View>


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

        </>
    );
}

export default CardClientes;