import { Tabs } 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 AntDesign from '@expo/vector-icons/AntDesign';
import { useUser } from '../ContextUser';
import { useAuthHandler } from '../AuthHandler';

export default function TabLayout() {
  const colorScheme = useColorScheme();
  const { role } = useUser();
  
  // Handle auth in tabs layout
  useAuthHandler();

  return (
    <Tabs screenOptions={{tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint, headerShown: false, tabBarButton: HapticTab}}>
      <Tabs.Screen name="index" options={{ href: null}}/>
      <Tabs.Screen name="explore" options={{ href: null }}/>
      <Tabs.Screen name="templateSreen" options={{ href: null}}/>
      <Tabs.Screen
        name="home"
        options={{
          title: 'Home',
          tabBarIcon: ({ color }) => (
            <IconSymbol size={28} name="house.fill" color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="gestionnaire_ressource"
        options={{
          title: 'Ressources',
          tabBarIcon: ({ color }) => (
            <IconSymbol size={28} name="backpack.fill" color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="gestion_user"
        options={{
          title: 'Users',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="person.fill" color={color} />,
        }}
      />
      <Tabs.Screen
        name="mapScreen"
        options={{
          title: 'Map',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
        }}
      />
      <Tabs.Screen
        name="addScreen"
        options={{
          title: 'Ajouter',
          href: role === 'chef' ? '/(tabs)/addScreen' : null,
          tabBarIcon: ({ color }) => (
            <AntDesign name="plus" size={24} color={color} />
          ),
        }}
      />
    </Tabs>
  );
}