import React, { useContext } from 'react'
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"
import { createDrawerNavigator } from '@react-navigation/drawer';
import { getScreenType } from '../constants/functions';
import colors from '../constants/colors';
import SearchNavigator from './SearchNavigator';
import MainPageNavigator from './MainPageNavigator';
import SidebarPage from '../screens/Sidebar/SidebarPage';
import BookmarkNavigator from './BookmarkNavigator';
import ProfileNavigator from './ProfileNavigator';
import { horizontalScale, verticalScale } from '../constants/metrics';
import IonIcon from 'react-native-vector-icons/Ionicons'
import { ThemeContext } from '../context/theme.context';

const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();

const defaultScreenOptions = {
    headerShown: false
}

const HomePageNavigator = () => {
    return (

        <Drawer.Navigator
            initialRouteName="HomePage"
            screenOptions={{
                drawerType: 'front',
                drawerStyle:  {width: '100%'},
            }}
            drawerContent={({ navigation }) => <SidebarPage navigation={navigation} />}>
            <Drawer.Screen name="HomePageTabs" component={HomePageTabsNavigator} options={(navigation) => ({
                headerShown: false
            })} />
        </Drawer.Navigator>

    )
}

const HomePageTabsNavigator = ({ route, navigation }) => {

    const theme = useContext(ThemeContext)
    const currentTheme = theme.state.theme
    return (
        <Tab.Navigator
            screenOptions={({ route }) => ({
                tabBarItemStyle: { paddingHorizontal: horizontalScale(36), flex: 0 },
                tabBarStyle: {
                    backgroundColor: currentTheme === 'light' ? colors().white : colors().black_variant,
                    height: verticalScale(64),
                    alignItems: 'center'
                },
                tabBarShowLabel: false,
                tabBarIcon: ({ focused, color, size }) => {
                    let iconName;
                    let colorName;

                    switch (route.name) {
                        case "MainNav":
                            iconName = "home-outline";
                            break;
                        case "SearchNav":
                            iconName = "search-outline";
                            break
                        case "BookmarkNav":
                            iconName = "bookmark-outline";
                            break
                        case "ProfileNav":
                            iconName = 'person-outline';
                            break
                        default:
                            break;
                    }

                    colorName = focused ? colors().primaryColor : colors().recessive;

                    // You can return any component that you like here!
                    return <IonIcon name={iconName} size={size} color={colorName} />;
                },
            })}

        >
            <Tab.Screen
                name="MainNav"
                component={MainPageNavigator}
                options={(navigation) => ({ ...defaultScreenOptions })}
            />
            <Tab.Screen
                name="SearchNav"
                component={SearchNavigator}
                options={(navigation) => ({ ...defaultScreenOptions })}
            />
            <Tab.Screen
                name="BookmarkNav"
                component={BookmarkNavigator}
                options={(navigation) => ({ ...defaultScreenOptions })}
            />
            <Tab.Screen
                name="ProfileNav"
                component={ProfileNavigator}
                options={(navigation) => ({ ...defaultScreenOptions })}
            />

        </Tab.Navigator>

    )
}

export default HomePageNavigator