import React from 'react';
import {View, StyleSheet, Text } from "react-native";
import { useTheme } from "react-native-paper";
import ProfileScreen from "@/app/ProfileScreen";
import StatusPage from "@/app/StatusPage";
import Nav from "@/app/Nav";
import { useUser } from "@/context/UserContext";

const Index = () => {
    const theme = useTheme();

    const {
        isProfileActive,
        setProfileActive,
        userId,
        userName,
        setUserName,
        userImage,
        setUserImage,
        userStatus,
        setUserStatus,
        setUserDataChanged,
        setTheme,
        currentTheme,
        isLoading,
    } = useUser();

    if (isLoading) {
        console.log("Still loading");
        return (
            <View style={[styles.container, { backgroundColor: theme.colors.background, justifyContent: 'center', alignItems: 'center' }]}>
                <Text>Loading...</Text>
            </View>
        );
    }

    return (
        <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
            <Nav
                toggleProfile={() => setProfileActive(true)}
            />
            <StatusPage
                id={userId}
                name={userName}
                image={userImage}
                currentStatus={userStatus}
                setStatus={setUserStatus}
                isProfileActive={isProfileActive}
            />
            <ProfileScreen
                visible={isProfileActive}
                id={userId}
                name={userName}
                setName={setUserName}
                image={userImage}
                setImage={setUserImage}
                setTheme={setTheme}
                currentTheme={currentTheme}
                setChanged={setUserDataChanged}
                onClose={() => setProfileActive(false)}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: { flex: 1, alignItems: "stretch" },
    imageBackground: {
        position: "absolute",  // Allows child elements to layer on top
        width: "100%",         // Ensure full coverage of the column
        height: "100%",        // Fully stretches to column height
        resizeMode: "cover",   // Ensures it fits well
        opacity: 0.3,          // Fades the image
    },
});

export default Index;