import React from 'react';
import {
  CommonActions,
  NavigationContainer as NavigationContainerBase,
} from '@react-navigation/native';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { BottomNavigation, useTheme } from 'react-native-paper';
import { Home, Search, Tags, Settings } from './screens';

function NavigationContainer() {
  const TabNavigator = createBottomTabNavigator();
  const theme = useTheme();

  return (
    <NavigationContainerBase
      theme={{
        dark: theme.dark,
        colors: {
          primary: theme.colors.primary,
          background: theme.colors.background,
          card: theme.colors.surface,
          text: theme.colors.onSurface,
          border: theme.colors.outline,
          notification: theme.colors.error,
        },
      }}>
      <TabNavigator.Navigator
        screenOptions={{
          headerShown: false,
        }}
        tabBar={({ navigation, state, descriptors, insets }) => (
          <BottomNavigation.Bar
            navigationState={state}
            safeAreaInsets={insets}
            onTabPress={({ route, preventDefault }) => {
              const event = navigation.emit({
                type: 'tabPress',
                target: route.key,
                canPreventDefault: true,
              });
              if (event.defaultPrevented) {
                preventDefault();
              } else {
                navigation.dispatch({
                  ...CommonActions.navigate(route.name, route.params),
                  target: state.key,
                });
              }
            }}
            renderIcon={({ route, focused, color }) => {
              const { options } = descriptors[route.key];
              if (options.tabBarIcon) {
                return options.tabBarIcon({ focused, color, size: 24 });
              }
            }}
            getLabelText={({ route }) => {
              const { options } = descriptors[route.key];
              return options.title ?? route.name;
            }}
          />
        )}>
        <TabNavigator.Screen
          name="Home"
          component={Home}
          options={{
            tabBarIcon: ({ color }) => (
              <FontAwesome5 name="home" color={color} size={20} />
            ),
          }}
        />
        <TabNavigator.Screen
          name="Search"
          component={Search}
          options={{
            tabBarIcon: ({ color }) => (
              <FontAwesome5 name="search" color={color} size={20} />
            ),
          }}
        />
        <TabNavigator.Screen
          name="Tags"
          component={Tags}
          options={{
            tabBarIcon: ({ color }) => (
              <FontAwesome5 name="tags" color={color} size={20} />
            ),
          }}
        />
        <TabNavigator.Screen
          name="Settings"
          component={Settings}
          options={{
            tabBarIcon: ({ color }) => (
              <FontAwesome5 name="cog" color={color} size={20} />
            ),
          }}
        />
      </TabNavigator.Navigator>
    </NavigationContainerBase>
  );
}

export default NavigationContainer;