import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { View } from "react-native";
import { useValues } from "@src/utils/context";
import { appColors } from "@src/themes";
import { HomeScreen } from "../../screens/homeScreen/home";
import { CategoryScreen } from "../../screens/bottomTab/category/categoryScreen";
import { RideScreen } from "../../screens/bottomTab/myRide/RideScreen";
import { ProfileSetting } from "../../screens/bottomTab/profileTab/profileSetting";
import CustomNavBar from "./CustomNavBar";

const Tab = createBottomTabNavigator();

export function MyTabs() {
  const { isDark, isRTL } = useValues();

  const screens = [
    { name: "HomeScreen", component: HomeScreen },
    { name: "CategoryScreen", component: CategoryScreen },
    { name: "RideScreen", component: RideScreen },
    { name: "Profile", component: ProfileSetting },
  ];

  const orderedScreens = isRTL ? [...screens].reverse() : screens;

  const initialRouteName = isRTL
    ? orderedScreens[orderedScreens.length - 1].name
    : "HomeScreen";

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: isDark
          ? appColors.darkHeader
          : appColors.lightGray,
      }}
    >
      <Tab.Navigator
        initialRouteName={initialRouteName}
        screenOptions={{ headerShown: false }}
        tabBar={(props) => <CustomNavBar {...props} />}
      >
        {orderedScreens.map((item) => (
          <Tab.Screen
            key={item.name}
            name={item.name}
            component={item.component}
          />
        ))}
      </Tab.Navigator>
    </View>
  );
}
