import React, { useState } from "react";
import { StyleSheet, SafeAreaView, Text, View} from "react-native";
import { useTheme } from '@react-navigation/native';
import { DefaultTheme, NavigationContainer } from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createStackNavigator} from '@react-navigation/stack';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import HomePage from "./HomePage";
import FindFriends from "../friends/FindFriends";
import UserProfile from "../profile/UserProfile";
import Communities from "../community/Communities";
import CreateCommunity from "../community/CreateCommunity";
import Nutrition from "../nutrition/Nutrition";
import EditProfile from "../profile/EditProfile";
import CommunityContent from "../community/CommunityContent";
import MakePost from "../community/MakePost";
import MyFriends from '../friends/MyFriends';
import UpdatePrivacy from '../profile/UpdatePrivacy';
import FriendProfile from '../friends/FriendProfile';
import FriendRequests from "../friends/FriendRequests";

const homepg = 'Home';
const findfriendpg = 'Friends';
const userprofilepg = 'Profile';
const communitiespg = 'Communities';
const createcommunitypg = 'CreateCommunity';
const communitycontentpg = 'CommunityContent';
const makepostpg = 'MakePost';

const tabBar = createBottomTabNavigator();
const Stack = createStackNavigator();


function HomeWithNav({route, navigation}) {
    const { colors } = useTheme();
    const [username, setUsername] = useState(route.params.username)
    function commNav() {
        return (
            <NavigationContainer theme={DefaultTheme} independent={true}>
                <Stack.Navigator initialRouteName='Communities' screenOptions={{headerShown:false}} initialParams={{username: username}}>
                <Stack.Screen screenOptions={({ route, navigation })} name="Communities" component={Communities} initialParams={{username: username}}/>
                <Stack.Screen screenOptions={({ route, navigation })} name="CreateCommunity" component={CreateCommunity} initialParams={{username: username}}/>
                <Stack.Screen screenOptions={({ route, navigation })} name="CommunityContent" component={CommunityContent} initialParams={{username: username}}/>
                <Stack.Screen screenOptions={({ route, navigation })} name="MakePost" component={MakePost} initialParams={{username: username}}/> 
                </Stack.Navigator>
            </NavigationContainer>
          );
    }

    function userNav() {
        return (
            <NavigationContainer theme={DefaultTheme} independent={true}>
                <Stack.Navigator initialRouteName='UserProfile' screenOptions={{headerShown:false}} initialParams={{username: username}}>
                <Stack.Screen screenOptions={({ route, navigation })} name="UserProfile" component={UserProfile} initialParams={{username: username}}/>
                <Stack.Screen screenOptions={({ route, navigation })} name="Nutrition" component={Nutrition} initialParams={{username: username}}/>
                <Stack.Screen screenOptions={({ route, navigation })} name="MyFriends" component={MyFriends} initialParams={{username: username}}/>
                <Stack.Screen screenOptions={({ route, navigation })} name="UpdatePrivacy" component={UpdatePrivacy} initialParams={{username: username}}/> 
                <Stack.Screen screenOptions={({ route, navigation })} name="EditProfile" component={EditProfile} initialParams={{username: username}}/> 
                <Stack.Screen screenOptions={({ route, navigation })} name="FriendProfile" component={FriendProfile} initialParams={{username: username}}/> 
                <Stack.Screen screenOptions={({ route, navigation })} name="FriendRequests" component={FriendRequests} initialParams={{username: username}}/>

                </Stack.Navigator>
            </NavigationContainer>
          );
    }

    function friendNav() {
        return (<NavigationContainer theme={DefaultTheme} independent={true}>
                <Stack.Navigator initialRouteName='FindFriends' screenOptions={{headerShown:false}} initialParams={{username: username}}>
                    <Stack.Screen screenOptions={({ route, navigation })} name="UserProfile" component={UserProfile} initialParams={{username: username}}/>
                    <Stack.Screen screenOptions={({ route, navigation })} name="FindFriends" component={FindFriends} initialParams={{username: username}}/>
                    <Stack.Screen screenOptions={({ route, navigation })} name="MyFriends" component={MyFriends} initialParams={{username: username}}/>
                    <Stack.Screen screenOptions={({ route, navigation })} name="FriendProfile" component={FriendProfile} initialParams={{username: username}}/>
                    <Stack.Screen screenOptions={({ route, navigation })} name="FriendRequests" component={FriendRequests} initialParams={{username: username}}/>
                </Stack.Navigator>
            </NavigationContainer>)
    }

    return (
        <NavigationContainer independent={true}>
            <tabBar.Navigator
            initialRouteName={homepg}
            screenOptions={({route}) => ({
                tabBarIcon: ({focused, color, size}) => {
                    let iconName;
                    let routeName = route.name;

                    if (routeName === homepg) {
                        iconName = focused ? 'home' : 'home-outline'
                    }
                    else if (routeName === findfriendpg) {
                        iconName = focused ? 'account-group' : 'account-group-outline'
                    }
                    else if (routeName === userprofilepg) {
                        iconName = focused ? 'account-circle' : 'account-circle-outline'
                    }
                    else if (routeName === communitiespg) {
                        iconName = focused ? 'chat' : 'chat-outline'
                    }
                    return <Icon name={iconName} color="#5c5a55" size={20}/>
                },
                headerShown: false
            })}
            tabBarOptions={{
                labelStyle: {paddingBottom: 10, fontSize: 0},
                style:{padding: 10, height:50}
            }}
            >
            <Stack.Screen
                name="Friends"
                component={friendNav}
                options={{ headerShown: false }}
            />     
            <Stack.Screen
                    name="Communities"
                    component={commNav}
                    options={{ headerShown: false }}
                />
            <Stack.Screen name="Home" component={HomePage} initialParams={{username: username}}/>
            <Stack.Screen
                    name="Profile"
                    component={userNav}
                    options={{ headerShown: false }}
            />
            </tabBar.Navigator>
        </NavigationContainer>
    );
}

const styles = StyleSheet.create({
    screen:{
        marginTop: "20%",
        paddingLeft: "5%",
        paddingRight: "5%",
        paddingBottom: "30%",
        marginLeft: "10%",
        marginRight: "10%"
    },
    title: {
        fontSize: 25,
        fontWeight: "bold",
        marginTop: "10%",
        paddingBottom: "20%",
        textAlign:"left"
    },
    
});

export default HomeWithNav;