import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Ionicons } from '@expo/vector-icons';

import { SomeOtherScreen1 } from './src/screens/SomeOtherScreen1';
import { SomeTabScreen1 } from './src/screens/SomeTabScreen1';
import { SomeTabScreen2 } from './src/screens/SomeTabScreen2';
// importing the screens we want as named components

import { ThemeProvider, useTheme } from './src/contexts/ThemeContext';
// we are using the themecontext to centralize all our colors
// anywhere in the project we can get colors with:
// const { colors } = useTheme();
// ensure for other contexts, wrap the navigation with their provider in the App component below

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();
// we define the tab navigators and regular stack navigators with the pages avaliable
// components described in either are naviagble with code like the line below:
// navigation.navigate('some_screen')

// tab navigator component using theme
function TabNavigator() {
  const { colors } = useTheme();

  return (
    <Tab.Navigator
      id={undefined}
      screenOptions={{
        tabBarActiveTintColor: colors.primary,
        tabBarInactiveTintColor: colors.textSecondary,
        tabBarStyle: {
          backgroundColor: colors.background,
          borderTopColor: colors.surface,
        },
      }}
    >
      <Tab.Screen
        name="Screen 1"
        component={SomeTabScreen1}
        options={{
          tabBarLabel: 'Screen 1',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="code" size={size} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="Screen 2"
        component={SomeTabScreen2}
        options={{
          tabBarLabel: 'Screen 2',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="code" size={size} color={color} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

// navigation wrapper component that uses theme
function NavigationWrapper() {
  const { colors } = useTheme();

  return (
    <NavigationContainer>
      <Stack.Navigator
        id={undefined}
        screenOptions={{
          headerStyle: {
            backgroundColor: colors.background,
          },
          headerTintColor: colors.primary,
          headerTitleStyle: {
            color: colors.text,
          },
          
        }}
      >
        <Stack.Screen
          name="Main"
          component={TabNavigator}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="Test"
          component={SomeOtherScreen1}
          options={{
            title: 'Other Screen'
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// wrap as many contexts here as you like,
export default function App() {
  return (
    <ThemeProvider>
        <NavigationWrapper />
    </ThemeProvider>
  );
}