import "../global.css";
import { GluestackUIProvider } from "./src/components/ui/gluestack-ui-provider";
import HomeScreen from "@/src/screen/HomeScreen";
import ProfileScreen from "@/src/screen/ProfileScreen";
import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import {
    AntDesign,
    Entypo,
    MaterialCommunityIcons,
    MaterialIcons,
} from "@expo/vector-icons";

export default function RootLayout() {
    const BottomTabNavigator = createBottomTabNavigator();
    return (
        <GluestackUIProvider>
            <BottomTabNavigator.Navigator
                initialRouteName="Home"
                screenOptions={{
                    headerShown: false,
                    tabBarShowLabel: false,
                    tabBarStyle: {
                        height: 75,
                        backgroundColor: "#f9f9f9",
                    },
                    tabBarActiveTintColor: "black",
                    tabBarInactiveTintColor: "#8e8e93",
                    tabBarItemStyle: {
                        borderRadius: 50,
                    },
                }}
            >
                <BottomTabNavigator.Screen
                    name="Home"
                    component={HomeScreen}
                    options={{


                        tabBarIcon: ({ color, size, focused }) => (
                            <MaterialIcons
                                name="home"
                                color={focused ? "black" : color}
                                size={focused ? size + 4 : size}
                            />

                        ),
                    }}
                />

                <BottomTabNavigator.Screen
                    name="Exercice"
                    component={ProfileScreen}
                    options={{
                        tabBarIcon: ({ color, size, focused }) => (
                            <MaterialCommunityIcons
                                name="dumbbell"
                                size={focused ? size + 4 : size}
                                color={focused ? "black" : color}
                            />
                        ),
                    }}
                />

                <BottomTabNavigator.Screen
                    name="Add"
                    component={ProfileScreen}
                    options={{
                        tabBarIcon: ({ color, size, focused }) => (
                            <Entypo
                                name="plus"
                                size={focused ? size + 6 : size}
                                color='white'
                            />
                        ),
                        tabBarItemStyle: {
                            borderRadius: 50,
                            backgroundColor: "orange",
                        },
                    }}
                />

                <BottomTabNavigator.Screen
                    name="Help"
                    component={ProfileScreen}
                    options={{
                        tabBarIcon: ({ color, size, focused }) => (
                            <AntDesign
                                name="question"
                                size={focused ? size + 2 : size} // Augmente la taille si actif
                                color={focused ? "black" : color}
                            />
                        ),
                    }}
                />

                <BottomTabNavigator.Screen
                    name="Settings"
                    component={ProfileScreen}

                    options={{


                        tabBarIcon: ({ color, size, focused }) => (
                            <MaterialIcons
                                name="account-circle"
                                size={focused ? size + 3 : size}
                                color={focused ? "black" : color}
                            />


                        ),
                    }}
                />
            </BottomTabNavigator.Navigator>
        </GluestackUIProvider>
    );
}