import { Alert, AsyncStorage, Image, ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { MaterialIcons, Entypo } from '@expo/vector-icons';
import React, { useState, useEffect } from 'react';
import { styles } from './styles';
import { DrawerActions, useNavigation } from '@react-navigation/core';
import api from '../../services/api';

const CustomDrawer: React.FC = () => {
    const navigation: any = useNavigation();
    const [permissoes, setPermissoes] = useState<any>([]);

    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 {

        }
    }

    async function logout() {
        Alert.alert('Sair', `Você tem certeza que quer sair?`, [
            {
                text: 'Não',
                style: 'cancel',
            },

            {
                text: 'Sim',
                onPress: async () => {
                    try {
                        await AsyncStorage.clear();
                        navigation.navigate('Login');
                    } catch (error) {
                        Alert.alert('Não foi possivel sair, tente novamente!')
                    }
                }
            }
        ])
    }


    useEffect(() => {
        listarPermissoes();

    }, [])

    return (
        <View style={{ flex: 1, backgroundColor: '#fff' }}>
            <Image style={styles.logo} source={require('../../assets/logo2.png')} />

            <View style={{ width: '90%', backgroundColor: '#c1c1c1', height: 0.5, alignSelf: 'center', marginBottom: 5, marginTop: 5 }}></View>

            <ScrollView
                style={styles.container}
            >

                {permissoes.imoveis == '1' ?
                    <View>
                        <TouchableOpacity
                            style={styles.Pages}
                            onPress={() => {
                                navigation.navigate("Imoveis")
                                navigation.dispatch(DrawerActions.closeDrawer())
                            }}
                        >
                            <MaterialIcons style={styles.iconRegistered} name="home" size={22} color="gray" />

                            <Text style={styles.PagesText}>Imóveis</Text>
                        </TouchableOpacity>


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

                {permissoes.funcionarios == '1' ?
                    <View>
                        <TouchableOpacity
                            style={styles.Pages}
                            onPress={() => {
                                navigation.navigate("Funcionarios")
                                navigation.dispatch(DrawerActions.closeDrawer())
                            }}
                        >
                            <MaterialIcons style={styles.iconRegistered} name="people-outline" size={22} color="gray" />

                            <Text style={styles.PagesText}>Funcionários</Text>
                        </TouchableOpacity>


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

                {permissoes.vendedores == '1' ?
                    <View>
                        <TouchableOpacity
                            style={styles.Pages}
                            onPress={() => {
                                navigation.navigate("Vendedores")
                                navigation.dispatch(DrawerActions.closeDrawer())
                            }}
                        >
                            <MaterialIcons style={styles.iconRegistered} name="person" size={22} color="gray" />

                            <Text style={styles.PagesText}>Proprietários</Text>
                        </TouchableOpacity>


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

                {permissoes.compradores == '1' ?
                    <View>
                        <TouchableOpacity
                            style={styles.Pages}
                            onPress={() => {
                                navigation.navigate("Compradores")
                                navigation.dispatch(DrawerActions.closeDrawer())
                            }}
                        >
                            <MaterialIcons style={styles.iconRegistered} name="person" size={22} color="gray" />

                            <Text style={styles.PagesText}>Compradores</Text>
                        </TouchableOpacity>


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

                {permissoes.locatarios == '1' ?
                    <View>
                        <TouchableOpacity
                            style={styles.Pages}
                            onPress={() => {
                                navigation.navigate("Locatarios")
                                navigation.dispatch(DrawerActions.closeDrawer())
                            }}
                        >
                            <MaterialIcons style={styles.iconRegistered} name="person" size={22} color="gray" />

                            <Text style={styles.PagesText}>Locatários</Text>
                        </TouchableOpacity>


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

                {permissoes.usuarios == '1' ?
                    <View>
                        <TouchableOpacity
                            style={styles.Pages}
                            onPress={() => {
                                navigation.navigate("Usuarios")
                                navigation.dispatch(DrawerActions.closeDrawer())
                            }}
                        >
                            <MaterialIcons style={styles.iconRegistered} name="people-alt" size={22} color="gray" />

                            <Text style={styles.PagesText}>Usuários</Text>
                        </TouchableOpacity>


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

                {permissoes.tarefas == '1' ?
                    <View>
                        <TouchableOpacity
                            style={styles.Pages}
                            onPress={() => {
                                navigation.navigate("Tarefas")
                                navigation.dispatch(DrawerActions.closeDrawer())
                            }}
                        >
                            <MaterialIcons style={styles.iconRegistered} name="lock-clock" size={22} color="gray" />

                            <Text style={styles.PagesText}>Tarefas Usuários</Text>
                        </TouchableOpacity>


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

                {permissoes.agenda == '1' ?
                    <View>
                        <TouchableOpacity
                            style={styles.Pages}
                            onPress={() => {
                                navigation.navigate("Agenda")
                                navigation.dispatch(DrawerActions.closeDrawer())
                            }}
                        >
                            <MaterialIcons style={styles.iconRegistered} name="lock-clock" size={22} color="gray" />

                            <Text style={styles.PagesText}>Minhas Tarefas</Text>
                        </TouchableOpacity>


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

                {permissoes.pagar == '1' ?
                    <View>
                        <TouchableOpacity
                            style={styles.Pages}
                            onPress={() => {
                                navigation.navigate("Pagar")
                                navigation.dispatch(DrawerActions.closeDrawer())
                            }}
                        >
                            <MaterialIcons style={styles.iconRegistered} name="money" size={22} color="gray" />

                            <Text style={styles.PagesText}>Contas à Pagar</Text>
                        </TouchableOpacity>


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

                {permissoes.receber == '1' ?
                    <View>
                        <TouchableOpacity
                            style={styles.Pages}
                            onPress={() => {
                                navigation.navigate("Receber")
                                navigation.dispatch(DrawerActions.closeDrawer())
                            }}
                        >
                            <MaterialIcons style={styles.iconRegistered} name="money-off" size={22} color="gray" />

                            <Text style={styles.PagesText}>Contas à Receber</Text>
                        </TouchableOpacity>


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

                {permissoes.movimentacoes == '1' ?
                    <View>
                        <TouchableOpacity
                            style={styles.Pages}
                            onPress={() => {
                                navigation.navigate("Movimentacoes")
                                navigation.dispatch(DrawerActions.closeDrawer())
                            }}
                        >
                            <MaterialIcons style={styles.iconRegistered} name="credit-card" size={22} color="gray" />

                            <Text style={styles.PagesText}>Movimentacões</Text>
                        </TouchableOpacity>


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

                {permissoes.comissoes == '1' ?
                    <View>
                        <TouchableOpacity
                            style={styles.Pages}
                            onPress={() => {
                                navigation.navigate("Comissoes")
                                navigation.dispatch(DrawerActions.closeDrawer())
                            }}
                        >
                            <MaterialIcons style={styles.iconRegistered} name="money" size={22} color="gray" />

                            <Text style={styles.PagesText}>Comissões</Text>
                        </TouchableOpacity>


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

                {permissoes.alugueis == '1' ?
                    <View>
                        <TouchableOpacity
                            style={styles.Pages}
                            onPress={() => {
                                navigation.navigate("Alugueis")
                                navigation.dispatch(DrawerActions.closeDrawer())
                            }}
                        >
                            <MaterialIcons style={styles.iconRegistered} name="home" size={22} color="gray" />

                            <Text style={styles.PagesText}>Alugueis</Text>
                        </TouchableOpacity>


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

                {permissoes.vendas == '1' ?
                    <View>
                        <TouchableOpacity
                            style={styles.Pages}
                            onPress={() => {
                                navigation.navigate("Vendas")
                                navigation.dispatch(DrawerActions.closeDrawer())
                            }}
                        >
                            <MaterialIcons style={styles.iconRegistered} name="money-off" size={22} color="gray" />

                            <Text style={styles.PagesText}>Vendas</Text>
                        </TouchableOpacity>


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




            </ScrollView>

            <View style={styles.footer}>
                <TouchableOpacity
                    onPress={() => logout()}
                    style={styles.Sair}
                >
                    <MaterialIcons name="subdirectory-arrow-left" size={25} color="gray" />
                    <Text style={styles.SairText}>Sair da conta</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}

export default CustomDrawer;