import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { BottomTabParamList } from '@navigation/navigationTypes';
import {
  EarningsScreen,
  JobsScreen,
  InboxScreen,
  ProfileScreen,
  DashboardScreen,
} from '@features/screens';
import { useAppTheme } from '@theme';
import { RouteNames } from '@utils/constants';

const Tab = createBottomTabNavigator<BottomTabParamList>();

const BottomTabNavigator: React.FC = () => {
  const { colors } = useAppTheme();

  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarActiveTintColor: colors.primary,
        tabBarInactiveTintColor: colors.textSecondary,
        tabBarStyle: {
          backgroundColor: colors.background,
        },
        tabBarIcon: ({ color, size, focused }) => {
          let iconName: string;

          switch (route.name) {
            case RouteNames.Dashboard:
              iconName = focused ? 'home' : 'home-outline';
              break;

            case RouteNames.Earnings:
              iconName = focused ? 'cash' : 'cash-multiple';
              break;

            case RouteNames.Jobs:
              iconName = focused ? 'briefcase' : 'briefcase-outline';
              break;

            case RouteNames.Inbox:
              iconName = focused ? 'message' : 'message-outline';
              break;

            case RouteNames.Profile:
              iconName = focused ? 'account' : 'account-outline';
              break;

            default:
              iconName = 'circle';
          }

          return (
            <MaterialCommunityIcons
              name={iconName}
              size={size}
              color={color}
            />
          );
        },
      })}
    >
      <Tab.Screen
        name={RouteNames.Dashboard}
        component={DashboardScreen}
        options={{ tabBarLabel: 'Home' }}
      />

      <Tab.Screen
        name={RouteNames.Earnings}
        component={EarningsScreen}
        options={{ tabBarLabel: 'Earning' }}
      />

      <Tab.Screen
        name={RouteNames.Jobs}
        component={JobsScreen}
        options={{ tabBarLabel: 'Jobs' }}
      />

      <Tab.Screen
        name={RouteNames.Inbox}
        component={InboxScreen}
        options={{ tabBarLabel: 'Inbox' }}
      />

      <Tab.Screen
        name={RouteNames.Profile}
        component={ProfileScreen}
        options={{ tabBarLabel: 'Account' }}
      />
    </Tab.Navigator>
  );
};

export default BottomTabNavigator;