import { StatusBar } from 'expo-status-bar';
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, TextInput, SafeAreaView } from 'react-native';
import API from './API.js';
import LoginForm from './components/Login.js';
import { Provider as PaperProvider } from 'react-native-paper';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Login from "./Views/Login.js"
import Feed from "./Views/Feed.js"
import Profile from "./Views/Profile.js"
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

const Tab = createMaterialBottomTabNavigator();

const Stack = createNativeStackNavigator();

const MainNavigation = () => {
    return (
            <Tab.Navigator initialRouteName="Home"
                activeColor="#0d6efd"
                inactiveColor="#FFFFFF"
                barStyle={{ backgroundColor: '#000000' }}>
                <Tab.Screen
                    name="Feed"
                    component={Feed}
                    options={{
                        tabBarLabel: 'Home',
                        tabBarIcon: ({ color }) => (
                            <MaterialIcons name="home" color={color} size={26} />
                        ),
                        tabBarBadge: false
                    }}
                    listeners={({ navigation, route }) => ({
                        tabPress: e => {
                            navigation.navigate('Feed')
                        },
                    })}
                />
                
                <Tab.Screen name="Logout" component={Login} />
            </Tab.Navigator>
    )
}

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={MainNavigation} options={{headerShown:false}} />
                <Stack.Screen
                    name="Profile"
                    component={Profile}
                    options={{
                        tabBarLabel: 'Profile'
                    }}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        marginTop: 25,
        paddingTop: 10,
        backgroundColor: "#edf2f7"
    },
});