import React from 'react';
import {View, Text } from "react-native";
import { useTheme } from "react-native-paper";
import Profile from "@/components/Profile";
import LocationScreen from "@/components/Location";
import Status from "@/components/Status";
import TopNav from "@/components/TopNav";
import DrawerMenu from "@/components/DrawerMenu";
import Dialogs from "@/components/Dialogs";
import { useUser } from "@/context/UserContext";
import styles from "@/assets/styles";
import log from "@/util/log"

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

    const {
        isProfileActive,
        setProfileActive,
        isMenuActive,
        setMenuActive,
        setAboutActive,
        isAboutActive,
        setPrivacyActive,
        isPrivacyActive,
        setBugActive,
        isBugActive,
        setLocationActive,
        isLocationActive,
        userId,
        userName,
        setUserName,
        userImage,
        setUserImage,
        park,
        setPark,
        userStatus,
        setUserStatus,
        setUserDataChanged,
        setTheme,
        currentTheme,
        isLoading,
    } = useUser();

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

    return (
        <View style={[styles.indexContainer, { backgroundColor: theme.colors.background }]}>
            <DrawerMenu
                isMenuActive={isMenuActive}
                onClose={() => setMenuActive(false)}
                toggleAbout={() => setAboutActive(!isAboutActive)}
                togglePrivacy={() => setPrivacyActive(!isPrivacyActive)}
                toggleBug={() => setBugActive(!isBugActive)}
                toggleProfile={() => setProfileActive(true)}
                toggleLocation={() => setLocationActive(true)}
            />
            <Dialogs
                aboutVisible={isAboutActive}
                privacyVisible={isPrivacyActive}
                bugVisible={isBugActive}
                toggleAbout={() => setAboutActive(!isAboutActive)}
                togglePrivacy={() => setPrivacyActive(!isPrivacyActive)}
                toggleBug={() => setBugActive(!isBugActive)}
            />
            <TopNav
                toggleMenu={() => setMenuActive(!isMenuActive)}
            />
            <Status
                id={userId}
                name={userName}
                image={userImage}
                currentStatus={userStatus}
                setStatus={setUserStatus}
                currentTheme={currentTheme}
                isProfileActive={isProfileActive}
                isMenuActive={isMenuActive}
            />
            <Profile
                visible={isProfileActive}
                id={userId}
                name={userName}
                setName={setUserName}
                image={userImage}
                setImage={setUserImage}
                setTheme={setTheme}
                currentTheme={currentTheme}
                setChanged={setUserDataChanged}
                onClose={() => setProfileActive(false)}
            />
            <LocationScreen
                visible={isLocationActive}
                currentTheme={currentTheme}
                park={park}
                setPark={setPark}
                setChanged={setUserDataChanged}
                onClose={() => setLocationActive(false)}
            />
        </View>
    );
};

export default Index;