import { StatusBar } from 'expo-status-bar';
import React, { use, useEffect, useState } from 'react';
import { StyleSheet, Text, View, Image, SafeAreaView } from 'react-native';
import API from './../API.js';
import LoginForm from './../components/Login.js';
import RegisterForm from './../components/Register.js';
import i18n from "../i18nMessages.js";
import { Button } from 'react-native-paper';

export default function App({ navigation, route }) {
    const [isLogin, setIsLogin] = useState(true);

    useEffect(() => {
        getData = async () => {
            const tokenFromRoute = typeof route?.params?.token === "string" ? route.params.token.trim() : "";
            if (tokenFromRoute) return;
            let r = await API.isLoggedIn();
            if (r) {
                await API.logout();
                navigation.navigate('Login')
            }
        }
        getData();
        return () => {

        }
    }, [route?.params?.token]);

    return (
        <SafeAreaView style={styles.container}>
            <Image
                style={styles.logo}
                source={require('./../assets/icon.png')}
            />
            <Text style={styles.header}>{i18n.t("message.appName")}</Text>
            <View style={{ flexDirection: "row", justifyContent: "center", width: "100%" }}>
                <Button disabled={isLogin} onPress={() => setIsLogin(true)}>
                    {i18n.t("message.login")}
                </Button>
                <Button disabled={!isLogin} onPress={() => setIsLogin(false)}>
                    {i18n.t("message.register")}
                </Button>
            </View>
            {
                isLogin ? <LoginForm /> : <RegisterForm />
            }
            <StatusBar style="auto" />
            {/* <View style={{ position: "absolute", top: 60, left: 10, opacity: 0.5 }} >
                <Text onPress={() => {
                    alert("Register your church on fellowshipapps.com");
                }}>{"<- Not an EMI family member?"}</Text>
            </View>  */}
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        flex: 1,
        flexDirection: "column",
        justifyContent: "center",
        width: "100%",
        alignContent: 'center',
        alignItems: 'center',
    },
    header: {
        fontFamily: 'Helvetica-Bold',
        fontSize: 42,
        textAlign: "left",
        paddingBottom: 15,
        color: '#777',
        alignContent: 'center'
    },
    logo: {
        width: 250,
        height: 250,
        justifyContent: 'center',
        alignItems: 'center',
    },
});