import { useUserAuthenticationContext } from "@/contexts/UserAuthenticationContext";
import type { MainStackScreenComponentProps } from "@/navigations/Types";
import Button from "@components/Button";
import ContainerBorderTopCurved from "@components/ContainerBorderTopCurved";
import InputWithTopLabel from "@components/InputWithTopLabel";
import BackgroundDefault from "@components/backgrounds/BackgroundDefault";
import Box from "@components/bases/Box";
import Text from "@components/bases/Text";
import { Fontisto } from "@expo/vector-icons";
import { LOG } from "@logger";
import { containers } from "@styles/Commons";
import { useCallback, useState } from "react";
import { TouchableOpacity, View } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";

const log = LOG.extend("UserLoginScreen");
const UserLoginScreen: MainStackScreenComponentProps<"userLoginScreen"> = ({ navigation }) => {
	log.debug("UserLoginScreen");
	const { login, isAuthenticating } = useUserAuthenticationContext();

	// TODO : Remove default value for email and password
	const [email, setEmail] = useState("admin");
	const [password, setPassword] = useState("admin");

	const submit = useCallback(() => {
		login(email, password);
	}, [email, password, login]);

	return (
		<BackgroundDefault>
			<View style={[containers.containerFull]}>
				<Box style={{ height: "20%" }} px={"l"}>
					<Box
						px={"m"}
						justifyContent={"space-between"}
						flexDirection={"row"}
						alignItems={"center"}
					>
						<TouchableOpacity onPress={() => navigation.goBack()}>
							<Fontisto name="close-a" size={12} color="black" />
						</TouchableOpacity>

						<TouchableOpacity>
							<Text>Mot de passe oublie ?</Text>
						</TouchableOpacity>
					</Box>
				</Box>
				<ContainerBorderTopCurved>
					<KeyboardAwareScrollView
						onKeyboardDidShow={() => {
							log.debug("Keyboard did show");
						}}
					>
						<Box p={"l"} paddingTop={"x100"} mb={"s"}>
							<Box mb={"l"}>
								<Text fontSize={40} fontWeight={"bold"} variant={"black"}>
									Connexion
								</Text>
								<Text color={"gray"}>Bienvenue, vous nous avez manqué !</Text>
							</Box>

							<Box gap={"m"}>
								<InputWithTopLabel
									label="Email"
									// value={email}
									autoCorrect={false}
									textContentType="emailAddress"
									onChangeText={(email) => setEmail(email)}
								/>
								<InputWithTopLabel
									label="Mot de passe"
									secureTextEntry={true}
									textContentType="oneTimeCode"
									// value={password}
									onChangeText={(text) => setPassword(text)}
								/>
							</Box>
						</Box>
						<Box p={"s"}>
							<Button
								variant={"full"}
								textVariants={"primary"}
								label="Se connecter"
								onPress={() => {
									submit();
								}}
								isLoading={isAuthenticating}
							/>
							<Button
								variant={"lightGray"}
								textVariants={"black"}
								label="Creer un compte"
								onPress={() => {}}
							/>
						</Box>
					</KeyboardAwareScrollView>
				</ContainerBorderTopCurved>
			</View>
		</BackgroundDefault>
	);
};

export default UserLoginScreen;