import { Tabs } from "expo-router/tabs";
import { StyleSheet } from "react-native";

import { FontAwesome } from "@expo/vector-icons";
import { Redirect } from "expo-router";
import React, { useEffect } from "react";
import { useTheme } from "../contexts/ThemeContext";
import { useAuth } from "../contexts/AuthContext";

export default function Layout() {
    const {authState} = useAuth()
    const {colors} = useTheme()
    const styles = StyleSheet.create({
        sceneContainer: {
            backgroundColor: colors.containerColor,
        },
        tabBar: {
            backgroundColor: colors.containerColor,
            borderTopColor: colors.backgroundColor
        }
    });

    const screenOptions = {
            tabBarActiveTintColor: colors.tabIconSelected,
            tabBarInactiveTintColor: colors.tabIconDefault,
            headerShown: false,
            tabBarStyle: styles.tabBar,
    }

    if(!authState?.authenticated){
        return (
        <Redirect href={"/"} />)
    }

    return (
        <Tabs sceneContainerStyle={styles.sceneContainer} screenOptions={screenOptions}>
            <Tabs.Screen name="budget" options={
                {
                    tabBarLabel: "Budget",
                    tabBarIcon: ({size, color}) => (
                        <FontAwesome name="money" size={size} color={color}/>),
                    unmountOnBlur: true,
                    href: "(tabs)/budget"
                }
            }/>
            <Tabs.Screen name="home" options={
                {
                    tabBarLabel: "Home",
                    tabBarIcon: ({size, color}) => (
                        <FontAwesome name="home" size={size} color={color}/>),
                    unmountOnBlur: true,
                    href: "(tabs)/home/"
                }
            }/>
            <Tabs.Screen name="stats/index" options={
                {
                    tabBarLabel: "Stats",
                    tabBarIcon: ({size, color}) => (
                        <FontAwesome name="bar-chart" size={size} color={color}/>),
                    unmountOnBlur: true,
                }
            }/>
        </Tabs>
        );
}