import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { } from 'expo-router';
import React from 'react';


import { HapticTab } from '@/components/expoExempleComponents/haptic-tab';
import { IconSymbol } from '@/components/ui/icon-symbol';
import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';
import GestionOuvrier from './gestion_ouvrier';
import ListMateriel from './gestionnaire_ressource';
import Home from './home';
import MapScreen from './mapScreen';
import AddChantier from './addChantier';
import AntDesign from '@expo/vector-icons/AntDesign';
import { UserProvider } from '../ContextUser';
import { ChantierProvider } from '../ContextChantier';
import { RessourcesProvider } from '../ContextRessource';

const Tabs = createBottomTabNavigator();

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <UserProvider>
      <ChantierProvider>
        <RessourcesProvider>
          <Tabs.Navigator
            initialRouteName='explore'
            screenOptions={{
              tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
              headerShown: false,
              tabBarButton: HapticTab,
            }}>
            <Tabs.Screen
              name="home"
              component={Home}
              options={{
                title: 'Home',
                tabBarIcon: ({ color }) => (
                  <IconSymbol size={28} name="house.fill" color={color} />
                ),
              }}
            />
            <Tabs.Screen
              name="gestionnaire_ressource"
              component={ListMateriel}
              options={{
                title: 'Ressources',
                tabBarIcon: ({ color }) => (
                  <IconSymbol size={28} name="backpack.fill" color={color} />
                ),
              }}
            />
            <Tabs.Screen
              name="GestionOuvrier"
              component={GestionOuvrier}
              options={{
                title: 'Bonjour',
                tabBarIcon: ({ color }) => <IconSymbol size={28} name="person.fill" color={color} />,
              }}
            />
            <Tabs.Screen
              name="explore"
              component={MapScreen}
              options={{
                title: 'MapScreen',
                tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
              }}
            >
            </Tabs.Screen>
            <Tabs.Screen
              name="addChantier"
              component={AddChantier}
              options={{
                title: 'Ajouter',
                tabBarIcon: ({ color }) => (
                  <AntDesign name="plus" size={24} color="black" />
                ),
              }}
            />

          </Tabs.Navigator>
        </RessourcesProvider>
      </ChantierProvider>
    </UserProvider>
  );
}
