import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { Provider as PaperProvider, DefaultTheme, } from 'react-native-paper';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Login from "./Views/Login.js"
import Feed from "./Views/Feed.js"
import Profile from "./Views/Profile.js"
import Notifications from './Views/Notifications.js';
import SinglePost from './Views/SinglePost.js'


const Tab = createMaterialBottomTabNavigator();
const Stack = createNativeStackNavigator();
const theme = {
    ...DefaultTheme,
    roundness: 2,
    colors: {
        ...DefaultTheme.colors,
        primary: '#000000',
        accent: '#0d6efd',
        background: "#edf2f7",
    },
};

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="Notifications" 
                component={Notifications} 
                options={{
                    tabBarLabel: 'Notifications',
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="notifications" color={color} size={26} />
                    ),
                    tabBarBadge: false
                }}
            />
            
            <Tab.Screen name="Logout" component={Login} />
        </Tab.Navigator>
    )
}

export default function App() {
    return (
        <PaperProvider settings={{
            icon: props => <MaterialIcons {...props} />,
        }} theme={theme}>
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen 
                        name="Home" 
                        component={MainNavigation} 
                        options={{ headerShown: false }} 
                    />
                    <Stack.Screen
                        name="Profile"
                        component={Profile}
                        options={{
                            tabBarLabel: 'Profile'
                        }}
                    />
                    <Stack.Screen name="SinglePost" component={SinglePost} />
                </Stack.Navigator>
            </NavigationContainer>
        </PaperProvider>
    );
}