import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import React from 'react';
import {NavigationIcon} from '../../components';
import {Home, Notifications, Upload} from '../../screens';
import Profile from '../profile/Profile';

const Tabs = createBottomTabNavigator();

const NavigationBar: React.FC = () => {
  return (
    <Tabs.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused}) => {
          if (route.name === 'Home') {
            return focused ? (
              <NavigationIcon tab="Home" disabled={false} />
            ) : (
              <NavigationIcon tab="Home" disabled={true} />
            );
          } else if (route.name === 'Search') {
            return focused ? (
              <NavigationIcon tab="Search" disabled={false} />
            ) : (
              <NavigationIcon tab="Search" disabled={true} />
            );
          } else if (route.name === 'Upload') {
            return focused ? (
              <NavigationIcon tab="Upload" disabled={false} />
            ) : (
              <NavigationIcon tab="Upload" disabled={true} />
            );
          } else if (route.name === 'Notifications') {
            return focused ? (
              <NavigationIcon tab="Notifications" disabled={false} />
            ) : (
              <NavigationIcon tab="Notifications" disabled={true} />
            );
          } else if (route.name === 'Profile') {
            return focused ? (
              <NavigationIcon tab="Profile" disabled={false} />
            ) : (
              <NavigationIcon tab="Profile" disabled={true} />
            );
          }
        },
      })}
      initialRouteName="Profile"
      tabBarOptions={{
        showLabel: false,
        style: {
          backgroundColor: 'transparent',
          position: 'absolute',
          borderTopWidth: 0,
          left: 0,
          right: 0,
          bottom: 0,
        },
      }}>
      <Tabs.Screen name="Home" component={Home} />
      <Tabs.Screen
        name="Search"
        component={Profile}
        initialParams={{isProfileView: true}}
      />
      <Tabs.Screen name="Upload" component={Upload} />
      <Tabs.Screen name="Notifications" component={Notifications} />
      <Tabs.Screen
        name="Profile"
        component={Profile}
        initialParams={{isProfileView: false}}
      />
    </Tabs.Navigator>
  );
};

export default NavigationBar;