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

interface DadosProps {
    data: {
        id: string;
        nome: string;
        email: string;
        data_admissao: string;
        data_admissaoF: string;
        cargo: string;
        foto: string;
        ativo: string;
        telefone: string;
        cpf: string;
        endereco: string;
        obs: string;
        banco: string;
        tipo: string;
        conta: string;
        agencia: string;
        pix: string;
        creci: string;
        nome_cargo: string;
    }
}


const CardUsuarios = ({ data }: DadosProps) => {

    const [abrirModal, setAbrirModal] = useState(false);
    const navigation: any = useNavigation();
     
    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(`api/funcionarios/excluir.php?id=${id}`);

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

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




    async function ativar(nome: string, id: string, atv: string) {
        
        if(atv == 'Sim'){
            var ativo = ('Você tem certeza que deseja desativar o Registro? ');
            var ativoMsg = ('Você desativou o Funcionário ');
            var ativoMsgTitulo = ('Desativar Registro ');
        }else{
            var ativo = ('Você tem certeza que ativar o Registro? ');
            var ativoMsg = ('Você ativou o Funcionário ');
            var ativoMsgTitulo = ('Ativar Registro ');
        }
        
        Alert.alert(ativoMsgTitulo, ativo + nome, [
            {
                text: 'Não',
                style: 'cancel',
            },

            {
                text: 'Sim',
                onPress: async () => {
                    try {
                        const response = await api.get(`api/funcionarios/ativar.php?id=${id}&ativo=${atv}`);

                        showMessage({
                            message: ativoMsg,
                            description: "Mudar Status",
                            type: "info",
                            duration: 800,
                        });

                        navigation.push('Funcionarios');
                    } catch (error) {
                        Alert.alert('Não foi possivel altera o status, 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}`)
                        }}

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

                        onPressArquivo={async () => {
                            ativar(data.nome, data.id, data.ativo);
                        }}


                    >
                        <TouchableOpacity
                            style={styles.box}
                            onPress={() => setAbrirModal(true)}
                        >


                            {(() => {
                                if (data.ativo == 'Sim') {
                                    return (
                                        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: -5 }}>
                                            <View style={{ width: 65 }}>
                                                <Image style={{ width: 50, height: 50, }} source={{ uri: (url + 'sistema/painel/images/perfil/' + data.foto) }} />
                                            </View>
                                            <View style={{ width: '100%', marginTop: 3 }}>
                                                <Text style={{ color: '#000', fontSize: 13 }}>{data.nome} - {data.nome_cargo}</Text>
                                                <Text style={{ color: '#000', fontSize: 12 }}>Telefone: {data.telefone}</Text>
                                            </View>
                                        </View>
                                    )
                                } else {
                                    return (
                                        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: -5 }}>
                                            <View style={{ width: 65 }}>
                                                <Image style={{ width: 50, height: 50, opacity: 0.3 }} source={{ uri: (url + 'sistema/painel/images/perfil/' + data.foto) }} />
                                            </View>
                                            <View style={{ width: '100%', marginTop: 3 }}>
                                                <Text style={{ color: '#9c9c9c', fontSize: 13 }}>{data.nome} - {data.nome_cargo}</Text>
                                                <Text style={{ color: '#9c9c9c', fontSize: 12 }}>Telefone: {data.telefone}</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>



                        <View style={styles.Section}>                            
                            <Text style={styles.Cliente}>{data.nome} - {data.nome_cargo}</Text>
                        </View>



                        <View style={styles.Section}>
                             <Text style={styles.Entrada}>Email: {data.email}</Text>

                        </View>

                        <View style={styles.Section}>

                            <Text style={styles.Entrada}>Telefone: {data.telefone}</Text>
                            <Text style={styles.Entrada}>Ativo: {data.ativo}</Text>
                        </View>


                        <View style={styles.Section}>

                            <Text style={styles.Entrada}>CPF: {data.cpf}</Text>
                            <Text style={styles.Entrada}>Admissão: {data.data_admissaoF}</Text>
                        </View>

                        <View style={styles.Section}>

                            <Text style={styles.Entrada}>Endereço: {data.endereco}</Text>

                        </View>

                        <View style={styles.Section}>

                            <Text style={styles.Entrada}>Banco: {data.banco}</Text>
                            <Text style={styles.Entrada}>Tipo: {data.tipo}</Text>
                        </View>

                        <View style={styles.Section}>

                            <Text style={styles.Entrada}>Agencia: {data.agencia}</Text>
                            <Text style={styles.Entrada}>Conta: {data.conta}</Text>
                        </View>


                        <View style={styles.Section}>

                            <Text style={styles.Entrada}>Chave Pix: {data.pix}</Text>
                        </View>

                        {(() => {
                            if (data.creci != '' && data.creci != null) {

                                return (

                                    <View style={styles.Section}>

                                        <Text style={styles.Entrada}>Creci: {data.creci}</Text>
                                    </View>

                                )

                            }

                        })()}


                        {(() => {
                            if (data.obs != '' && data.obs != null) {

                                return (

                                    <View style={styles.Section}>
                                        <Text style={styles.Entrada}>OBS: {data.obs}</Text>
                                    </View>

                                )

                            }

                        })()}


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

                                }

                            })()}
                        </TouchableOpacity>



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



        </>
    );
}

export default CardUsuarios;