import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { Ionicons } from "@expo/vector-icons";

import { AuthProvider } from "./src/context/AuthContext";
import { ThemeProvider, useTheme } from "./src/context/ThemeContext";

import WebmailScreen from "./src/screens/WebmailScreen";
import ManageScreen from "./src/screens/ManageScreen";
import RegisterScreen from "./src/screens/RegisterScreen";
import SettingsScreen from "./src/screens/SettingsScreen";

const Tab = createBottomTabNavigator();

function MainTabs() {
  const { colors } = useTheme();

  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarActiveTintColor: colors.primary,
        tabBarInactiveTintColor: colors.textDim,
        tabBarStyle: {
          backgroundColor: colors.tabBarBg,
          borderTopColor: colors.tabBarBorder,
          borderTopWidth: 1,
          height: 60,
          paddingBottom: 8,
          paddingTop: 8,
        },
        tabBarLabelStyle: {
          fontSize: 11,
          fontWeight: "600",
        },
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === "Webmail") {
            iconName = focused ? "mail" : "mail-outline";
          } else if (route.name === "Kelola") {
            iconName = focused ? "globe" : "globe-outline";
          } else if (route.name === "Daftar") {
            iconName = focused ? "add-circle" : "add-circle-outline";
          } else if (route.name === "Pengaturan") {
            iconName = focused ? "settings" : "settings-outline";
          }

          return <Ionicons name={iconName} size={22} color={color} />;
        },
      })}
    >
      <Tab.Screen
        name="Webmail"
        component={WebmailScreen}
        options={{ tabBarLabel: "Kotak Surat" }}
      />
      <Tab.Screen
        name="Kelola"
        component={ManageScreen}
        options={{ tabBarLabel: "Kelola Domain" }}
      />
      <Tab.Screen
        name="Daftar"
        component={RegisterScreen}
        options={{ tabBarLabel: "Daftar Baru" }}
      />
      <Tab.Screen
        name="Pengaturan"
        component={SettingsScreen}
        options={{ tabBarLabel: "Pengaturan" }}
      />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <AuthProvider>
          <NavigationContainer>
            <MainTabs />
          </NavigationContainer>
        </AuthProvider>
      </ThemeProvider>
    </SafeAreaProvider>
  );
}
