import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

import {
  HomeScreen,
  SearchScreen,
  MyOrdersScreen,
  OffersScreen,
  AccountScreen,
} from '@features/screens';

export type MainTabParamList = {
  HomeScreen: undefined;
  SearchScreen: { categoryId?: string; categoryName?: string } | undefined;
  MyOrdersScreen: undefined;
  OffersScreen: undefined;
  AccountScreen: undefined;
};

const Tab = createBottomTabNavigator<MainTabParamList>();

export const MainTabNavigator: React.FC = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerShown: false,

        tabBarIcon: ({ color, size, focused }) => {
          let iconName: string;

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

            case 'SearchScreen':
              iconName = 'magnify';
              break;

            case 'MyOrdersScreen':
              iconName = focused ? 'package-variant' : 'package-variant-closed';
              break;

            case 'OffersScreen':
              iconName = focused ? 'tag' : 'tag-outline';
              break;

            case 'AccountScreen':
              iconName = focused ? 'account' : 'account-outline';
              break;

            default:
              iconName = 'circle';
          }

          return (
            <MaterialCommunityIcons
              name={iconName}
              size={size}
              color={color}
            />
          );
        },

        tabBarActiveTintColor: '#05824C',
        tabBarInactiveTintColor: '#666666',

        tabBarStyle: {
          height: 65,
          paddingBottom: 8,
          paddingTop: 8,
        },

        tabBarLabelStyle: {
          fontSize: 11,
          fontWeight: '500',
        },
      })}
    >
      <Tab.Screen
        name="HomeScreen"
        component={HomeScreen}
        options={{ tabBarLabel: 'Home' }}
      />

      <Tab.Screen
        name="SearchScreen"
        component={SearchScreen}
        options={{ tabBarLabel: 'Search' }}
      />

      <Tab.Screen
        name="MyOrdersScreen"
        component={MyOrdersScreen}
        options={{ tabBarLabel: 'Orders' }}
      />

      <Tab.Screen
        name="OffersScreen"
        component={OffersScreen}
        options={{ tabBarLabel: 'Offers' }}
      />

      <Tab.Screen
        name="AccountScreen"
        component={AccountScreen}
        options={{ tabBarLabel: 'Account' }}
      />
    </Tab.Navigator>
  );
};