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/Tarefas';
import api from '../../../services/api';
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;
        titulo: string;
        descricao: string;
        hora: string;
        data: string;
        usuario: string;
        usuario_lanc: string;
        status: string;
        obs: string;
        nome_usu: string;
        nome_usu_lanc:string;
        dataF:string;
        horaF:string;
        descricaoF:string;
        card: string;
        icone: string;
    }
}


const CardClientes = ({ data }: DadosProps) => {
    const navigation: any = useNavigation();
    const [abrirModal, setAbrirModal] = useState(false);
    
    
    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/tarefas/excluir.php?id=${id}&user=${user}&nome=${nome}`);

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

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


    async function baixar(nome: string, id: string) {
        const user = await AsyncStorage.getItem('@user'); 
        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(`api/tarefas/baixar.php?id=${id}&user=${user}&nome=${nome}`);
                        navigation.push('Tarefas');
                        showMessage({
                            message: "Tarefa Baixada",
                            description: 'Tarefa Baixada com Sucesso!!',
                            type: "info",
                            duration: 800,
                        });
                    } catch (error) {
                        Alert.alert('Não foi possivel excluir, tente novamente!')
                    }
                }
            }
        ])
    }


    async function cancelarBaixar(nome: string, id: string) {
        const user = await AsyncStorage.getItem('@user'); 
        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(`api/tarefas/cancelar_baixar.php?id=${id}&user=${user}&nome=${nome}`);
                        navigation.push('Tarefas');
                        showMessage({
                            message: "Cancelamento da Baixa",
                            description: 'Tarefa Pedente Novamente!!',
                            type: "info",
                            duration: 800,
                        });
                    } 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.horaF}</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.horaF}</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;