circle-collect/src/navigation/BottomTabs.tsx

import React from "react";
import { BottomTabNavigationProp, createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { View, Text, StyleSheet, Platform } from "react-native";
import { Ionicons, IoniconsIconName } from "@react-native-vector-icons/ionicons";
import GroupScreen from "../screens/GroupScreen";
import Profile from "../screens/profile/Profile";
import Home from "../screens/home/Home";
import colors from "../components/colors";
import Setting from "../screens/setting/Setting";
import ManagementScreen from "../screens/management/ManagementScreen";


const TAB_CONFIG = {
  activeColor: "#000",
  inactiveColor: "#8e8e93",
  backgroundColor: "#fff",
  height: 70,
  iconSize: 28,
};

// Background (tab highlight) colors
const activeTabColors: { [key: string]: string } = {
  Home: colors.pastelPink,     // Soft pink
  Profile: colors.pastelBlue,  // Light sky blue
  Group: colors.pastelGreen,    // Gentle mint green
  Management: colors.pastelOrange, // Warm pastel yellow
};

// Icon/Text colors on active tabs
const activeIconColors: { [key: string]: string } = {
  Home: "#333",
  Profile: "#333",
  Group: "#333",
  Management: "#333",
}


export type RootTabParamList = {
  Home: undefined;
  Profile: undefined;
  Group: undefined;
  Management: { actionTab?: "My Groups" | "Joined Groups" | "Requests" | "Your Requests" };
};
// Define the navigation prop type for screens within the tab navigator
export type TabNavigationProp = BottomTabNavigationProp<RootTabParamList>;
const Tab = createBottomTabNavigator<RootTabParamList>();

const BottomTabs: React.FC = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarStyle: styles.tabBar,

        tabBarLabel: ({ focused, color }) =>
          !focused ? (
            <Text style={[styles.label, { color }]}>{route.name}</Text>
          ) : null,

        tabBarIcon: ({ focused }) => {
          let iconName: IoniconsIconName = "home-outline";

          // Determine icon based on route
          if (route.name === "Home") iconName = focused ? "home" : "home-outline";
          else if (route.name === "Profile") iconName = focused ? "person" : "person-outline";
          else if (route.name === "Management") iconName = focused ? "settings" : "settings-outline";
          else if (route.name === "Group") iconName = focused ? "people" : "people-outline";

          // 3. Get the active background color and icon color from the maps
          const activeBackgroundColor = activeTabColors[route.name];
          const activeIconColor = activeIconColors[route.name];

          return (
            <View
              style={[
                styles.iconContainer,
                // 4. Apply the dynamic background color when focused
                focused && [
                  styles.activeIconContainer,
                  { backgroundColor: activeBackgroundColor },
                ],
              ]}
            >
              (route.name === "Management"{<Ionicons
                name={iconName}
                size={TAB_CONFIG.iconSize}
                color={focused ? activeIconColor : TAB_CONFIG.inactiveColor}
              />}:null)
            </View>
          );
        },
      })}
    >
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Profile" component={Profile} />
      <Tab.Screen name="Group" component={GroupScreen} />
      <Tab.Screen name="Management" component={ManagementScreen} />
    </Tab.Navigator>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5f7fa",
  },
  text: {
    fontSize: 20,
    fontWeight: "600",
    color: "#111",
  },
  tabBar: {
    position: "absolute",
    bottom: 20,
    left: 20,
    right: 20,
    height: TAB_CONFIG.height,
    backgroundColor: TAB_CONFIG.backgroundColor,
    borderRadius: 20,
    shadowColor: "#000",
    shadowOpacity: 0.1,
    shadowOffset: { width: 0, height: 5 },
    shadowRadius: 8,
    elevation: 10,
    paddingBottom: Platform.OS === "ios" ? 25 : 10,
    paddingTop: 10,
    marginHorizontal: 10,
  },
  label: {
    paddingVertical: 5,
    fontSize: 12,
  },
  iconContainer: {
    justifyContent: "center",
    alignItems: "center",
    width: 80, // Reduced size for a sleeker look
    height: 60, // Reduced size
    marginTop: 10,
    borderRadius: 15,
  },
  activeIconContainer: {
    // The default active style, background color is now applied dynamically
    elevation: 2,
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowRadius: 5,
  },
});
export default BottomTabs