import React, { useEffect, useState } from 'react';

import {
    SafeAreaView,
    Text,
    View,
    ScrollView,
    TouchableOpacity,
    Image,
    ActivityIndicator,
    RefreshControl,
    StatusBar,
    AsyncStorage,
    Alert,
    
} from 'react-native';

import { MaterialIcons } from '@expo/vector-icons';
import { styles } from './style';
import { DrawerActions, useNavigation } from '@react-navigation/core';
import { AnimatedCircularProgress } from 'react-native-circular-progress';

import api from '../../services/api';
import url from '../../services/url';
import Load from '../../components/Load';
import { useIsFocused } from '@react-navigation/native';

export default function Home() {
    const navigation: any = useNavigation();
    const isFocused = useIsFocused();

    const [dados, setDados] = useState<any>([]);
    const [isLoading, setIsLoading] = useState(true);
    const [refreshing, setRefreshing] = React.useState(false);
    const [usu, setUsu] = React.useState('');


    const [lista, setLista] = useState<any>([]);


    async function logout() {
       
        await AsyncStorage.clear();
        navigation.navigate('Login');
                
    }

    async function listarDados() {
        try {
            const response = await api.get('apiIgreja/listar_igrejas.php');
            setLista(response.data.resultado);
                        
        } catch (error) {
            console.log("Error");
        } finally {
            setIsLoading(false);
            setRefreshing(false);
            
        }
    }

    useEffect(() => {
       
        listarDados();
    }, []);

    useEffect(() => {
        listarDados();
    }, [isFocused]);

    const onRefresh = () => {
        setRefreshing(true);
        listarDados();
       
    };

    const preffi = 25;


    return (
        <View style={{ flex: 1 }}>
            <StatusBar barStyle="light-content" />
            <View style={{ flex: 1 }}>
                <View style={styles.header}>
                    <View style={styles.containerHeader}>
                        <Image style={styles.logo} source={require('../../assets/logo3.png')} />
                        <TouchableOpacity
                            style={styles.menu}
                            onPress={() => logout()}
                        >
                            <MaterialIcons name="logout" size={20} color="#3d0300" />
                        </TouchableOpacity>   
                    </View>
                </View>

                {isLoading ?
                    <Load /> :

                    <ScrollView
                        style={{ flex: 1 }}
                        showsVerticalScrollIndicator={false}
                        nestedScrollEnabled={true}
                        refreshControl={
                            <RefreshControl
                                refreshing={refreshing}
                                onRefresh={onRefresh}
                            />
                        }
                    >

                        {lista.map((item: any) => 
                        <View style={styles.containerBox}>

                            <TouchableOpacity onPress={() => navigation.push("HomeIgreja", { id_reg: item.id, nome_reg: item.nome, foto_reg: item.foto })}>
                                <View>
                                    <View style={styles.box}>
                                    <Image style={styles.logo_igreja} source={{uri:(url + 'sistema/img/igrejas/' + item.foto)}} />
                                        <View style={styles.textos}>
                                            <Text style={styles.rText}>{item.nome_igreja}</Text>
                                            <Text style={styles.lenghtText}>{item.quantidade_membros} Membros</Text>
                                        </View>
                                    </View>
                                    <Text style={styles.textFooter}>Pastor Responsável: {item.nome_pastor}</Text>
                                </View>
                            </TouchableOpacity>
                            
                        </View>
                    )}


                    </ScrollView>
                }
            </View>
        </View>


    )
}