import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {
  getPathFromState,
  NavigationProp,
  ParamListBase,
} from '@react-navigation/native';
import { splitRouteByCamel } from '../../common/transducers';
import { HomeStack } from './home-stack';
import { StarredStack } from './starred-stack';
import { SearchStack } from './search-stack';
import { NotificationsStack } from './notifications-stack';
import { ProfileStack } from './profile-stack';
import { TabBarCustom } from './tab-bar-custom';
import { ROUTES_TAB } from '../constants';

const Tab = createBottomTabNavigator();

export const TabNavigation = ({
  navigation,
}: {
  navigation: NavigationProp<ParamListBase>;
}) => {
  const path = getPathFromState(navigation.getState());
  const str = path.slice(
    1,
    path.indexOf('?') !== -1 ? path.indexOf('?') : path.length
  );
  const segments = str.split('/');

  return (
    <Tab.Navigator
      initialRouteName={ROUTES_TAB.search}
      screenOptions={() => ({
        tabBarVisible:
          splitRouteByCamel(segments[segments.length - 1]).length === 1,
        headerShown: false,
        tabBarHideOnKeyboard: true,
      })}
      tabBar={TabBarCustom}
    >
      <Tab.Screen name={ROUTES_TAB.home} component={HomeStack} />
      <Tab.Screen name={ROUTES_TAB.starred} component={StarredStack} />
      <Tab.Screen name={ROUTES_TAB.search} component={SearchStack} />
      <Tab.Screen
        name={ROUTES_TAB.notifications}
        component={NotificationsStack}
      />
      <Tab.Screen name={ROUTES_TAB.profile} component={ProfileStack} />
    </Tab.Navigator>
  );
};