import React, {useEffect, useState} from "react";


import ThemedBackground from "../src/components/themed/ThemedBackground";
import Logo from "../src/components/Logo";
import ThemedHeader from "../src/components/themed/ThemedHeader";
import ThemedButton from "../src/components/themed/ThemedButton";
import ThemedTextInput from "../src/components/themed/ThemedTextInput";
import BackButton from "../src/components/BackButton";

import {useAuth} from "@/src/stores/authStore";
import {useRouter} from "expo-router";
import ThemeToggleButton from "@/src/components/ThemeToggleButton";
import PasswordInput from "@/src/components/PasswordInput";
import ThemedCheckbox from "@/src/components/themed/ThemedCheckbox";

export default function LoginScreen() {
    const {isAuthenticated, login, logout, error} = useAuth();
    const router = useRouter();
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const [stayLoggedIn, setStayLoggedIn] = useState(false);

    useEffect(() => {
        console.log(isAuthenticated);

        if (isAuthenticated) {
            console.log("User ist eingeloggt, weiterleiten...");
            router.replace("/");
        }
    }, [isAuthenticated]);

    const onLoginPressed = async () => {
        console.log("Login wird ausgeführt...")
        await login(username, password, stayLoggedIn);
    };

    if (isAuthenticated) {
        return (
            <ThemedBackground>
                <Logo/>
                <ThemedHeader>Du bist bereits eingeloggt. Was machst'n hier?</ThemedHeader>
                <ThemedButton mode="contained" onPress={logout} title={"Logout"} />
                <ThemedButton mode="outlined" onPress={() => router.push("/")} title={"Zurück"} />
            </ThemedBackground>
        )
    }

    return (
        <ThemedBackground>
            <BackButton goBack={router.back}/>
            <Logo/>
            <ThemedHeader>Hello.</ThemedHeader>
            <ThemedTextInput
                label="Username"
                returnKeyType="next"
                value={username}
                onChangeText={setUsername}
                error={!!error && error?.field === "username" }
                errorText={error?.message}
                autoCapitalize="none"
            />

            <PasswordInput
                label="Password"
                returnKeyType="done"
                value={password}
                onChangeText={setPassword}
                error={!!error && error?.field === "password" }
                errorText={error?.message}
                autoComplete="password"
            />
            <ThemedCheckbox
                label="Eingeloggt bleiben"
                value={stayLoggedIn}
                onValueChange={setStayLoggedIn}
            />

            <ThemedButton mode="outlined" onPress={onLoginPressed} title={"Login"} />
           <ThemeToggleButton />
        </ThemedBackground>
    );
}
