import React, { useEffect, useState } from 'react';
import { styles } from './style';

import {
    SafeAreaView,
    Text,
    View,
    ScrollView,
    TouchableOpacity,
    Image,
    ActivityIndicator,
    RefreshControl,
    StatusBar,
    AsyncStorage,
    Alert,

} from 'react-native';

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

import { useIsFocused } from '@react-navigation/native';

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

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


    async function listarPermissoes() {

        try {
            const user = await AsyncStorage.getItem('@user');
            const res = await api.get(`api/dashboard/permissoes.php?user=${user}`);
            setPermissoes(res.data);

        } catch (error) {
            console.log("Erro ao Listar " + error);
        } finally {
            setIsLoading(false);
            setRefreshing(false);

        }
    }


    async function listarDados() {

        try {
            const user = await AsyncStorage.getItem('@user');
            const res = await api.get(`api/dashboard/listar-cards.php?user=${user}`);
            setDados(res.data);

        } catch (error) {
            console.log("Erro ao Listar " + error);
        } finally {
            setIsLoading(false);
            setRefreshing(false);

        }
    }

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

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

    };


    return (
        <View style={{ flex: 1 }}>
            <StatusBar barStyle="light-content" />
            <View style={{ flex: 1 }}>
                <View style={styles.header}>
                    <View style={styles.containerHeader}>

                        <TouchableOpacity
                            style={styles.menu}
                            onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
                        >
                            <MaterialIcons name="menu" size={35} color="black" />
                        </TouchableOpacity>

                        <Image style={styles.logo} source={require('../../assets/logo2.png')} />

                    </View>
                </View>



                {isLoading ?
                    <Load /> :

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

                        <View style={styles.circleProgressView}>
                            <View style={styles.textProgressContainer}>
                                <Text style={styles.textProgressTitle}>Total de Tarefas</Text>
                                <Text style={styles.textProgress}>{dados.tarefas_concluidas} de {dados.tarefas_hoje} concluídas</Text>
                            </View>

                            <AnimatedCircularProgress
                                size={80}
                                width={8}
                                fill={dados.porcentagem_tarefas}
                                tintColor="#00e0ff"
                                backgroundColor="#e0e0e0"
                                lineCap={"round"}
                            >
                                {
                                    (fill) => (
                                        <Text style={styles.numberInside}>{dados.porcentagem_tarefas}%</Text>
                                    )
                                }
                            </AnimatedCircularProgress>
                        </View>

                        {permissoes.imoveis == '1' ?

                            <View style={styles.containerBox}>

                                <TouchableOpacity onPress={() => navigation.navigate("Imoveis")}>
                                    <View>
                                        <View style={styles.box}>
                                            <MaterialIcons style={styles.iconRegistered} name="home" size={70} color="#094a75" />
                                            <View style={styles.textos}>
                                                <Text style={styles.rText}>Total de Imóveis</Text>
                                                <Text style={styles.lenghtText}>{dados.total_imoveis}</Text>
                                            </View>
                                        </View>
                                        <Text style={styles.textFooterAzul}>Imóveis Cadastrdos</Text>
                                    </View>
                                </TouchableOpacity>

                            </View>
                            :
                            <View></View>
                        }


                        {permissoes.pagar == '1' ?
                            <View style={styles.containerBox}>

                                <TouchableOpacity onPress={() => navigation.navigate("Pagar")}>
                                    <View>
                                        <View style={styles.box}>
                                            <MaterialIcons style={styles.iconRegistered} name="money" size={70} color="#780b0b" />
                                            <View style={styles.textos}>
                                                <Text style={styles.rText}>Total de Contas</Text>
                                                <Text style={styles.lenghtText}>{dados.pagar_hoje}</Text>
                                            </View>
                                        </View>
                                        <Text style={styles.textFooterVermelho}>Pagar Hoje</Text>
                                    </View>
                                </TouchableOpacity>

                            </View>
                            :
                            <View></View>
                        }



                        {permissoes.receber == '1' ?
                            <View style={styles.containerBox}>

                                <TouchableOpacity onPress={() => navigation.navigate("Receber")}>
                                    <View>
                                        <View style={styles.box}>
                                            <MaterialIcons style={styles.iconRegistered} name="money-off" size={70} color="#00735a" />
                                            <View style={styles.textos}>
                                                <Text style={styles.rText}>Total de Contas</Text>
                                                <Text style={styles.lenghtText}>{dados.receber_hoje}</Text>
                                            </View>
                                        </View>
                                        <Text style={styles.textFooterVerde}>Receber Hoje</Text>
                                    </View>
                                </TouchableOpacity>

                            </View>
                            :
                            <View></View>
                        }

                        {permissoes.pagar == '1' ?
                            <View style={styles.containerBox}>

                                <TouchableOpacity onPress={() => navigation.navigate("Pagar")}>
                                    <View>
                                        <View style={styles.box}>
                                            <MaterialIcons style={styles.iconRegistered} name="money" size={70} color="#780b0b" />
                                            <View style={styles.textos}>
                                                <Text style={styles.rText}>Contas à Pagar</Text>
                                                <Text style={styles.lenghtText}>{dados.contas_pagar_vencidas}</Text>
                                            </View>
                                        </View>
                                        <Text style={styles.textFooterVermelho}>Contas Vencidas</Text>
                                    </View>
                                </TouchableOpacity>

                            </View>
                            :
                            <View></View>
                        }


                        {permissoes.receber == '1' ?
                            <View style={styles.containerBox}>

                                <TouchableOpacity onPress={() => navigation.navigate("Receber")}>
                                    <View>
                                        <View style={styles.box}>
                                            <MaterialIcons style={styles.iconRegistered} name="money-off" size={70} color="#00735a" />
                                            <View style={styles.textos}>
                                                <Text style={styles.rText}>Contas à Receber</Text>
                                                <Text style={styles.lenghtText}>{dados.contas_receber_vencidas}</Text>
                                            </View>
                                        </View>
                                        <Text style={styles.textFooterVerde}>Contas Vencidas</Text>
                                    </View>
                                </TouchableOpacity>

                            </View>
                            :
                            <View></View>
                        }



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






    )
}