import {Redirect, Tabs, useRouter} from "expo-router";
import { useSession } from "@/ctx";
import React from "react";
import { AntDesign, Ionicons, MaterialIcons } from "@expo/vector-icons";
import Loading from "../loading";

export default function TabBarLayout() {
  const { session, isLoading } = useSession();

  const router = useRouter()
  const sizeIcon = 24;
  // You can keep the splash screen open, or render a loading screen like we do here.
  if (isLoading) {
    return <Loading />;
  }

  // Only require authentication within the (app) group's layout as users
  // need to be able to access the (auth) group and sign in again.
  if (!session) {
    // On web, static rendering will stop here as the user is not authenticated
    // in the headless Node process that the pages are rendered in.
    return <Redirect href="/log-in" />;
  }
  return (
    <Tabs
      screenOptions={{
        headerShown: false,
      }}
    >
      <Tabs.Screen
        name="(home)"
        options={{
          tabBarShowLabel: false,
          tabBarIcon: () => (
            <Ionicons name="home" size={sizeIcon} color="black" />
          ),
        }}
      />

      <Tabs.Screen
        name="(exercice)"
        options={{
          tabBarShowLabel: false,
          tabBarIcon: () => (
            <MaterialIcons
              name="fitness-center"
              size={sizeIcon}
              color="black"
            />
          ),
        }}
      />

      <Tabs.Screen
        name="(add)"
        options={{
          tabBarShowLabel: false,
          tabBarIcon: () => (
            <Ionicons name="add-circle-outline" size={sizeIcon} color="black" />
          ),
        }}
      />

      <Tabs.Screen
        name="(profil)"
        options={{
          tabBarShowLabel: false,
          tabBarIcon: () => (
            <MaterialIcons
              name="account-circle"
              size={sizeIcon}
              color="black"
            />
          ),
        }}
      />

      <Tabs.Screen
        name="(help)"
        options={{
          tabBarShowLabel: false,
          tabBarIcon: () => (
            <AntDesign name="question" size={sizeIcon} color="black" />
          ),
        }}
      />
    </Tabs>
  );
}