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

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

  const router = useRouter();
  const sizeIcon = 24;
  if (isLoading) {
    return <Loading />;
  }

  if (!session) {
    return <Redirect href={"/log-in"} />;
  }
  console.log(session);
  if (!session.isQuizDone()) {
    return <Redirect href={"/quiz"} />;
  }

  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>
  );
}
