import { useNavigation } from '@react-navigation/native';
import React, { useState, useEffect } from 'react';
import {ScrollView, Image, TextInput, AsyncStorage, Modal, Alert, Linking, Text, TouchableOpacity, View } from 'react-native';
import SwipeableRow from '../../Linhas/2Itens';
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;
        titulo: string;
        tituloF: string;
        dono: string;
        corretor: string;
        descricao: string;
        tipo: string;
        cidade: string;
        bairro: string;
        valor: string;
        ano: string;
        visitas: string;
        area_total: string;
        area_construida: string;
        quartos: string;
        banheiros: string;
        suites: string;
        garagens: string;
        piscinas: string;
        img_principal: string;
        img_planta: string;
        img_banner: string;
        endereco: string;
        status: string;
        condicao: string;
        video: string;
        iptu: string;
        condominio: string;
        comissao_corretor: string;
        comissao_imob: string;
        url: string;
        data_cad: string;
        validade_anuncio: string;
        data_inicio: string;
        data_final: string;
        financiamento: string;
        numero_vaga: string;
        chave: string;
        complemento: string;
        condicao_pgto: string;
        telefone_dono: string;
        email_dono: string;
        doc_dono: string;
    }
}


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

    const [abrirModal, setAbrirModal] = useState(false);
    const navigation: any = useNavigation();


    const [id, setId] = useState("");
    const [nome, setNome] = 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/arquivos/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/arquivos/upload.php", formData);


    };
     
    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/imoveis/excluir.php?id=${id}`);

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

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


    async function arquivo(nome:string, id:string) {       
        
        setAbrirModalArquivo(true);
        setId(id); 
        setNome(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: id,
                nomeArquivo: nomeArquivo,
                nomeImagem: nomeImagem,
                user: user,
                registro: 'Imóveis',
            }

            const res = await api.post("api/arquivos/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.");
           
        }

        
          
    }



    return (
        <>
            {data.id === undefined && data.titulo === undefined ?

                <Text style={{ color: '#595858', fontSize: 14, marginTop: 10, alignContent: "center", textAlign: "center" }}>Nenhum Registro Encontrado!</Text>

                :

                <View>
                    <SwipeableRow
                      
                        onPressDelete={async () => {
                            excluir(data.tituloF, data.id);
                        }}

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


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

                               
                                        <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/imoveis/' + data.img_principal) }} />
                                            </View>
                                            <View style={{ width: '100%', marginTop: 3 }}>
                                                <Text style={{ color: '#000', fontSize: 13 }}>{data.tituloF} </Text>
                                                <Text style={{ color: '#000', fontSize: 12 }}>Tipo: {data.tipo} - Status: {data.status}</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.titulo} </Text>
                        </View>

                        <ScrollView>
                        
                        <View style={styles.Section}>
                             <Text style={styles.Entrada}>Id Imóvel: {data.id}</Text>
                             <Text style={styles.Entrada}>Dono: {data.dono}</Text>

                        </View>

                        <View style={styles.Section}>

                            <Text style={styles.Entrada}>Telefone Dono: {data.telefone_dono}</Text>
                            
                        </View>

                        <View style={styles.Section}>

                            <Text style={styles.Entrada}>Email Dono: {data.email_dono}</Text>
                            
                        </View>


                        <View style={styles.Section}>

                            <Text style={styles.Entrada}>Documento do Dono: {data.doc_dono}</Text>
                           
                        </View>

                        <View style={styles.Section}>

                            <Text style={styles.Entrada}>Corretor: {data.corretor}</Text>
                            <Text style={styles.Entrada}>Tipo: {data.tipo}</Text>

                        </View>

                        <View style={styles.Section}>

                            <Text style={styles.Entrada}>Valor: R$ {data.valor}</Text>
                            <Text style={styles.Entrada}>Status: {data.status}</Text>
                        </View>

                        <View style={styles.Section}>

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


                        <View style={styles.Section}>
                        <Text style={styles.Entrada}>Bairro: {data.bairro}</Text>
                            <Text style={styles.Entrada}>Cidaade: {data.cidade}</Text>
                        </View>


                        <View style={styles.Section}>
                        <Text style={styles.Entrada}>Complemento: {data.complemento}</Text>
                            <Text style={styles.Entrada}>Vaga: {data.numero_vaga}</Text>
                        </View>

                        
                        <View style={styles.Section}>
                        <Text style={styles.Entrada}>Financiamento: {data.financiamento}</Text>
                            <Text style={styles.Entrada}>Chave: {data.chave}</Text>
                        </View>

                        <View style={styles.Section}>
                        <Text style={styles.Entrada}>Condição PGTO: {data.condicao_pgto}</Text>
                            <Text style={styles.Entrada}>Ano: {data.ano}</Text>
                        </View>


                        
                        <View style={styles.Section}>
                        <Text style={styles.Entrada}>Área Total: {data.area_total}</Text>
                            <Text style={styles.Entrada}>Área Construída: {data.area_construida}</Text>
                        </View>

                        <View style={styles.Section}>
                        <Text style={styles.Entrada}>Quartos: {data.quartos}</Text>
                            <Text style={styles.Entrada}>Suítes: {data.suites}</Text>
                            <Text style={styles.Entrada}>Garagens: {data.garagens}</Text>
                        </View>

                        <View style={styles.Section}>
                        <Text style={styles.Entrada}>Piscinas: {data.piscinas}</Text>
                            <Text style={styles.Entrada}>Banheiros: {data.banheiros}</Text>
                            <Text style={styles.Entrada}>Visitas: {data.visitas}</Text>
                        </View>


                        <View style={styles.Section}>
                        <Text style={styles.Entrada}>Condição: {data.condicao}</Text>
                            <Text style={styles.Entrada}>IPTU Mês: R$ {data.iptu}</Text>
                            
                        </View>


                        <View style={styles.Section}>
                        <Text style={styles.Entrada}>Condomínio: R$ {data.condominio}</Text>
                        <Text style={styles.Entrada}>Cadastrado em {data.data_cad}</Text>                            
                        </View>


                        <View style={styles.Section}>
                        <Text style={styles.Entrada}>Comissão IMOB: {data.comissao_imob}</Text>
                        <Text style={styles.Entrada}>Comissão Corretor {data.comissao_corretor}</Text>                            
                        </View>


                        <View style={styles.Section}>
                        <Text style={styles.Entrada}>Início Anúncio: {data.data_inicio}</Text>
                        <Text style={styles.Entrada}>Final Anúncio {data.data_final}</Text>                            
                        </View>


                        <View style={styles.Section}>
                        <Text style={styles.Entrada}>Descrição Imóvel: {data.descricao}</Text>
                                                 
                        </View>

                    

                        <TouchableOpacity onPress={() => Linking.openURL(url + 'sistema/painel/images/imoveis/' + data.img_principal)}>
                            {(() => {
                                if (data.img_principal != 'sem-foto.png' && data.img_principal != '' && data.img_principal != null) {

                                    return (
                                        <View style={styles.viewImg}>
                                            <Image style={styles.ImagemModal} source={{ uri: (url + 'sistema/painel/images/imoveis/' + data.img_principal) }} />
                                            <Text style={styles.textoAbrir}>(Clique para Abrir)</Text>
                                        </View>
                                    )

                                }

                            })()}
                        </TouchableOpacity>

                        </ScrollView>



                    </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}>Funcionário: {nome}</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>


       
        </>




    );
}

export default CardUsuarios;