import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';

import CustomDrawer from '../components/CustomDrawer/CustomDrawer';
import TabNavigator from './TabNavigator';
import Ionicons from '@expo/vector-icons/Ionicons';
import SettingsScreen from '../screens/SettingsScreen';
import ProfileScreen from '../screens/ProfileScreen';

const Drawer = createDrawerNavigator();

const AppStack = () => {
    return (
        <Drawer.Navigator drawerContent={props => <CustomDrawer {...props} />}
            screenOptions={{
                headerShown: false,
                drawerActiveBackgroundColor: '#aa18ea',
                drawerActiveTintColor: '#fff',
                drawerInactiveTintColor: '#333',
                drawerLabelStyle: {
                    marginLeft: 5,
                    fontSize: 16
                }
            }}
        >
            <Drawer.Screen name='Home' component={TabNavigator} options={{
                drawerIcon: ({color}) => (
                    <Ionicons name='home-outline' size={22} color={color} />
                )
            }} />
            <Drawer.Screen name='Profile' component={ProfileScreen} options={{
                drawerIcon: ({color}) => (
                    <Ionicons name='person-outline' size={22} color={color} />
                )
            }} />
            <Drawer.Screen name='Settings' component={SettingsScreen} options={{
                drawerIcon: ({color}) => (
                    <Ionicons name='settings-outline' size={22} color={color} />
                )
            }} />
        </Drawer.Navigator>
    )
}

export default AppStack;