import { Redirect, Tabs } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { FontAwesome5 } from "@expo/vector-icons";
import { LIGHT_THEME } from "../../src/common/const/theme";
import { useAuth } from "../../src/auth/contexts/auth_context";
import { useTranslation } from "react-i18next";
import { useSetUp } from "../../src/common/contexts/set_up_context";

export default function Layout() {
  const { user, isVerified } = useAuth();
  const { isFirstTime } = useSetUp();
  const LANG = useTranslation();

  if (!user) {
    return <Redirect href={"/login"} />;
  }

  if (!isVerified) {
    return <Redirect href={"/verify"} />;
  }

  if (isFirstTime) {
    return <Redirect href={"/profile/set_up"} />;
  }

  return (
    <Tabs
      initialRouteName="index"
      screenOptions={{
        tabBarActiveTintColor: LIGHT_THEME.color.primary,
        tabBarInactiveTintColor: LIGHT_THEME.color.secondary,
        headerStyle: {
          backgroundColor: LIGHT_THEME.color.primary,
        },
        headerTitleStyle: {
          color: LIGHT_THEME.color.white,
        },
        headerTitleAlign: "center",
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: LANG.t("tabBar.homeLabel"),
          tabBarIcon: ({ color, focused }) => {
            if (focused) {
              return <Ionicons name="home" size={24} color={color} />;
            }
            return <Ionicons name="home-outline" size={24} color={color} />;
          },
        }}
      />
      <Tabs.Screen
        name="travel_history"
        options={{
          title: LANG.t("tabBar.travelHistoryLabel"),
          tabBarIcon: ({ color, focused }) => {
            if (focused) {
              return <FontAwesome5 name="history" size={24} color={color} />;
            }
            return <FontAwesome5 name="history" size={24} color={color} />;
          },
        }}
      />
      <Tabs.Screen
        name="account"
        options={{
          title: LANG.t("tabBar.accountLabel"),
          tabBarIcon: ({ color, focused }) => {
            if (focused) {
              return <Ionicons name="person" size={24} color={color} />;
            }
            return <Ionicons name="person-outline" size={24} color={color} />;
          },
        }}
      />
    </Tabs>
  );
}
