import React from 'react';
import { Feature } from '@common-stack/client-react';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Drawer, Header,BottomTabBar, Sample } from '../../components';
import { Ionicons,MaterialIcons,FontAwesome,FontAwesome5 ,AntDesign} from '@expo/vector-icons';
import { ProLayout } from './ProLayout';

export const appDrawerBottomNavigationConfig = {
    ['/']: {
        exact: false,
        container: createStackNavigator(),
        name: 'MainStack',
        props: {
            initialRouteName: 'MainStack.MainDrawer',
            screenOptions: {
                headerShown: false,
            },
        },
    },
    ['//main_drawer']: {
        exact: false,
        container: createDrawerNavigator(),
        name: 'MainDrawer',
        props: {
            initialRouteName: 'MainStack.MainDrawer.MainBottomTab',
            drawerContent: (props: any) => (
                <Drawer
                {...props}
                title={'ClockBook'}
                titleColor={'black'}
                logout={true}
                redirect={'MainStack.Login'}
                />
                ),
                screenOptions:(options:any) =>{
                    
                    return{
                        headerShown:false,
                        drawerIcon: 'grid',
                    }
                }
            },
        },
        ['//main_drawer/mainbottomtab']: {
            container: createBottomTabNavigator(),
            exact: false,
            name: 'MainBottomTab',
            props: {
                initialRouteName: 'MainStack.MainDrawer.MainBottomTab.Home',
                tabBar: (props: any) => <BottomTabBar {...props} />,
                screenOptions: ({ route }: any) => {
                    return {
                        headerShown: false,
                        title:'Home',
                        headerTitle:'Home',
                        tabBarActiveTintColor: '#ff5a60',
                        tabBarInactiveTintColor: 'black',
                    };
                },
            },
        },
        // ['//o']: {
        //     exact: false,
        //     name: 'Home',
        //     props: {
        //         initialParams: { orgName: null,title:'Home',priority:1 },
        //         component: ProLayout,
        //         priority:1,
        //         options: { 
        //             headerShown: true,
        //             header: (props: any) => <Header showToggle={true} right={true} {...props} />,
        //             title: 'Home',
        //             headerTitle:  'Home',
        //             priority: 1,
        //             tabBarActiveTintColor: '#ff5a60',
        //             tabBarInactiveTintColor: 'black',
        //             tabBarIcon: ({ color }: { color: any }) => <MaterialIcons name="home" size={24} color={color} />,
        //             tabBarLabel: 'Home',
        //          },
        //     },
        // },
    };