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

import {
    AsyncStorage,
    Text,
    TouchableOpacity,
    View,
} from 'react-native';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { AntDesign, MaterialIcons, MaterialCommunityIcons, Ionicons  } from '@expo/vector-icons';

import fonts from '../styles/fonts';

import DrawerRoutes from './drawer.routes';
import Comissoes from '../screens/Comissoes';
import Imoveis from '../screens/Imoveis';
import Agenda from '../screens/Agenda';
import { DrawerActions, useNavigation } from '@react-navigation/native';
import api from '../services/api';

const AppTab = createBottomTabNavigator();

const AuthRoutes = () => {
    const navigation = 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 {

        }
    }

    useEffect(() => {
        listarPermissoes();

    }, [])

    return (
        <AppTab.Navigator
        screenOptions={{
                tabBarActiveTintColor: "green",
                tabBarInactiveTintColor: 'gray',
                tabBarHideOnKeyboard: false,
                tabBarLabelPosition: 'below-icon',
                headerShown:false,
                
                tabBarStyle:{
                    height: 65,
                    paddingTop: 10
                },
            }}

            >
                <AppTab.Screen
                    name="Inicio"
                    component={DrawerRoutes}

                    options={{
                        tabBarIcon: (({size, color}) => (
                            <AntDesign
                                name="home"
                                size={size}
                                color={color}
                            />
                        )),
                        
                        tabBarLabel: (({ focused, color}) => (
                            <View>
                                <Text
                                    style={ focused ? {
                                        color: color,
                                        fontFamily: fonts.text,
                                        fontSize: 12,
                                        textAlign: 'center',
                                    } : {
                                        color: color,
                                        fontFamily: fonts.text,
                                        fontSize: 12
                                    }}
                                >
                                    Inicio
                                </Text>
                                <View
                                    style={ focused ? {

                                        backgroundColor: color,
                                        borderColor: color,
                                        width: 45,
                                        height: 2,
                                        borderTopLeftRadius: 5,
                                        borderTopRightRadius: 5,
                                        marginTop: 5,
                                    } : {
                                        height: 2,
                                    }}
                                >
                                </View>
                            </View>
                        ))
                    }}
                />


{permissoes.imoveis == '1' ?
                <AppTab.Screen
                    name="Imoveis"
                    component={Imoveis}
                    options={{
                        tabBarIcon: (({ size, color}) => (
                            <MaterialIcons
                                name="home-filled"
                                size={size} 
                                color={color} 
                            />
                        )),

                        tabBarLabel: (({ focused, color}) => (
                            <View>
                                <Text
                                    style={ focused ? {
                                        color: color,
                                        fontFamily: fonts.text,
                                        fontSize: 12,
                                        textAlign: 'center',

                                    } : {
                                        color: color,
                                        fontFamily: fonts.text,
                                        fontSize: 12
                                    }}
                                >
                                    Imóveis
                                </Text>
                                <View
                                    style={ focused ? {
                                        backgroundColor: color,
                                        borderColor: color,
                                        width: 65,
                                        height: 2,
                                        borderTopLeftRadius: 5,
                                        borderTopRightRadius: 5,
                                        marginTop: 5,
                                    } : {
                                        height: 2,
                                    }}
                                >
                                </View>
                            </View>
                        ))
                    }}
                />
                :
                <></>
            }



{permissoes.agenda == '1' ?
                <AppTab.Screen
                    name="Agenda"
                    component={Agenda}
                    options={{
                        tabBarIcon: (({size, color}) => (
                            <MaterialCommunityIcons
                                name="calendar-clock"
                                size={size}
                                color={color}
                            />
                        )),

                        tabBarLabel: (({ focused, color}) => (
                            <View>
                                <Text
                                    style={ focused ? {
                                        color: color,
                                        fontFamily: fonts.text,
                                        fontSize: 12,
                                        textAlign: 'center',
                                    } : {
                                        color: color,
                                        fontFamily: fonts.text,
                                        fontSize: 12
                                    }}
                                >
                                    Agenda
                                </Text>
                                <View
                                    style={ focused ? {
                                        backgroundColor: color,
                                        borderColor: color,
                                        width: 90,
                                        height: 2,
                                        borderTopLeftRadius: 5,
                                        borderTopRightRadius: 5,
                                        marginTop: 5,
                                    } : {
                                        height: 2,
                                    }}
                                >
                                </View>
                            </View>
                        ))
                    }}
                />
                :
                <></>
            }


{permissoes.comissoes == '1' ?           
                <AppTab.Screen
                    name="Comissoes"
                    component={Comissoes}

                    options={{
                        tabBarIcon: (({ size, color}) => (
                            <Ionicons
                                name="cash"
                                size={size} 
                                color={color} 
                            />
                        )),

                        tabBarLabel: (({ focused, color}) => (
                            <View>
                                <Text
                                    style={ focused ? {
                                        color: color,
                                        fontFamily: fonts.text,
                                        fontSize: 12,
                                        textAlign: 'center',

                                    } : {
                                        color: color,
                                        fontFamily: fonts.text,
                                        fontSize: 12
                                    }}
                                >
                                    Comissões
                                </Text>
                                <View
                                    style={ focused ? {
                                        backgroundColor: color,
                                        borderColor: color,
                                        width: 60,
                                        height: 2,
                                        borderTopLeftRadius: 5,
                                        borderTopRightRadius: 5,
                                        marginTop: 5,
                                    } : {
                                        height: 2,
                                    }}
                                >
                                </View>
                            </View>
                        ))
                    }}
                />

                :
                <></>
            }
            
        </AppTab.Navigator>
    )
}

export default AuthRoutes;