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 '../SwipeableRowTarefas';
import api from '../../services/api';
import url from '../../services/url';
import { styles } from './styles';
import fonts from "../../styles/fonts";
import { AntDesign, MaterialIcons, MaterialCommunityIcons, EvilIcons, Ionicons } from '@expo/vector-icons';
import { useState } from 'react';
import { showMessage, hideMessage } from "react-native-flash-message";

interface DadosProps {
    data: {
        id: string;
        titulo: string;
        data: string;
        hora: string;
        descricao: string;
        status: string;
        igreja: string;
        dataF: string;
        icone: string;
        card: string;
        descricaoF: 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/tarefas/excluir.php?id=${id}`);
                        navigation.push('Tarefas');
                        showMessage({
                            message: "Tarefa Excluída",
                            description: 'Exclusão efetuada com Sucesso!!',
                            type: "info",
                        });
                    } catch (error) {
                        Alert.alert('Não foi possivel excluir, tente novamente!')
                    }
                }
            }
        ])
    }


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

            {
                text: 'Sim',
                onPress: async () => {
                    try {
                        const response = await api.get(`apiIgreja/tarefas/baixar.php?id=${id}`);
                        navigation.push('Tarefas');
                        showMessage({
                            message: "Tarefa Baixada",
                            description: 'Tarefa Baixada com Sucesso!!',
                            type: "info",
                        });
                    } catch (error) {
                        Alert.alert('Não foi possivel excluir, tente novamente!')
                    }
                }
            }
        ])
    }


    async function cancelarBaixar(nome: string, id: string) {
        Alert.alert('Sair', `Você tem certeza que deseja cancelar a conclusão desta Tarefa voltando ela para Pendente : ` + nome, [
            {
                text: 'Não',
                style: 'cancel',
            },

            {
                text: 'Sim',
                onPress: async () => {
                    try {
                        const response = await api.get(`apiIgreja/tarefas/cancelar_baixar.php?id=${id}`);
                        navigation.push('Tarefas');
                        showMessage({
                            message: "Cancelamento da Baixa",
                            description: 'Tarefa Pedente Novamente!!',
                            type: "info",
                        });
                    } catch (error) {
                        Alert.alert('Não foi possivel excluir, tente novamente!')
                    }
                }
            }
        ])
    }


    return (
        <>
            {data.id === undefined || data.titulo === 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 () => {
                            if(data.status == 'Concluída'){
                                cancelarBaixar(data.titulo, data.id);
                            }else{
                                baixar(data.titulo, data.id);
                            }
                            
                        }}

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

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

                    >

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

                            <Text style={styles.Cliente}>{data.titulo}</Text>
                            <Text style={styles.Subtitulo}>{data.descricaoF}</Text>

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

                                <MaterialCommunityIcons 
                                style={{
                                    position: 'absolute',
                                    right: 5,
                                    height:42,
                                    width:42,
                                    top:-50,
                                    color:data.icone
                                }}
                                name="clock-outline" size={40}  />

                                <Text style={styles.VencimentoHoraCard}>{data.hora}</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.titulo}</Text>


                        <View style={styles.Section}>
                            <MaterialIcons style={styles.Icon} name="date-range" size={22} color="#c1c1c1" />
                            <Text style={styles.Entrada}>{data.dataF}</Text>
                            <Text style={styles.VencimentoHora}>Hora: {data.hora}</Text>
                        </View>



                        <View style={styles.Section}>
                            <MaterialIcons style={styles.Icon} name="lock-clock" size={22} color="#c1c1c1" />
                            <Text style={styles.Entrada}>Status da Tarefa: {data.status}</Text>
                            
                        </View>
                  
                        <View style={styles.Footer}>
                            <Text style={styles.FooterText}><Text style={{ color: 'gray' }}>{data.descricao}</Text></Text>
                        </View>

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

        </>
    );
}

export default CardClientes;