import React, { useState, useEffect } from 'react';
import { Alert, AsyncStorage, Image, ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { MaterialIcons, Entypo } from '@expo/vector-icons';

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 [esc_tesoureiro, setEscTesoureiro] = useState("flex");
    const [esc_secretario, setEscSecretario] = useState("flex");
    const [esc_rh, setEscRH] = useState("flex");
    const [esc_recep, setEscRecep] = useState("flex");
    const [esc_ambos, setEscAmbos] = useState("flex");

    async function logout() {
        const user = await AsyncStorage.getItem('@user');  
        Alert.alert('Sair', `Você tem certeza que quer sair?`, [
            {
                text: 'Não',
                style: 'cancel',
            },

            {
                text: 'Sim',
                onPress: async () => {
                    try {
                        await api.get(`api/login/logout.php?user=${user}`);
                        await AsyncStorage.clear();                        
                        navigation.navigate('Login');
                    } catch (error) {
                        Alert.alert('Não foi possivel sair, tente novamente!')
                    }
                }
            }
        ])
    }

    async function loadNivel() {
        const nivel:any = await AsyncStorage.getItem('@nivel');
        
        if(nivel.replace(/['"]+/g, '') == 'Tesoureiro'){
            setEscTesoureiro('none');
            setEscAmbos('none');            
        }else if(nivel.replace(/['"]+/g, '') == 'Secretario'){
            setEscSecretario('none'); 
            setEscAmbos('none'); 
        }else if(nivel.replace(/['"]+/g, '') == 'RH'){
            setEscRH('none'); 
            //setEscAmbos('none'); 
        }else if(nivel.replace(/['"]+/g, '') == 'Recepcionista'){
            setEscRecep('none'); 
            setEscAmbos('none'); 
        }
    }

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

    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: 13 }}></View>

            <ScrollView
                style={styles.container}
            >
                <View>
                    <TouchableOpacity
                        style={styles.Pages}
                        onPress={() => {
                            navigation.navigate("Pessoas")
                            navigation.dispatch(DrawerActions.closeDrawer())
                        }}
                    >
                        <MaterialIcons style={styles.iconRegistered} name="people-alt" size={30} color="gray" />

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

                   
                </View>

                <View>
                    <TouchableOpacity
                        style={styles.Pages}
                        onPress={() => {
                            navigation.navigate("Fornecedores")
                            navigation.dispatch(DrawerActions.closeDrawer())
                        }}
                    >
                        <MaterialIcons style={styles.iconRegistered} name="person-outline" size={30} color="gray" />

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


                    <View style={{display:esc_ambos}}>    
                    <TouchableOpacity
                        style={styles.Pages}
                        onPress={() => {
                            navigation.navigate("Funcionarios")
                            navigation.dispatch(DrawerActions.closeDrawer())
                        }}
                    >
                        <MaterialIcons style={styles.iconRegistered} name="person-outline" size={30} color="gray" />

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


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

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

                   
                </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;