import { useUserAuthenticationContext } from "@/contexts/UserAuthenticationContext";
import type { MainStackScreenComponentProps } from "@/navigations/Types";
import Button from "@components/Button";
import InputWithTopLabel from "@components/InputWithTopLabel";
import Box from "@components/bases/Box";
import WrapperWithDefaultBeasyBackgroundAndSafeAreaFull from "@components/wrappers/WrapperWithDefaultBeasyBackgroundAndSafeAreaFull";
import { Fontisto } from "@expo/vector-icons";
import { LOG } from "@logger";
import Card from "@re-card";
import Text from "@re-text";
import { useCallback, useState } from "react";
import { TouchableOpacity } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { useSafeAreaInsets } from "react-native-safe-area-context";

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 insets = useSafeAreaInsets();

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

	return (
		<WrapperWithDefaultBeasyBackgroundAndSafeAreaFull>
			<Box height={"100%"}>
				<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>
				<Card variant={"curvedTopContainer"} style={{ marginTop: "auto" }}>
					<KeyboardAwareScrollView
						// extraScrollHeight={-125}
						extraHeight={10}
						keyboardOpeningTime={Number.MAX_SAFE_INTEGER}
						showsVerticalScrollIndicator={false}
						keyboardShouldPersistTaps={"handled"}
					>
						<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>
				</Card>
			</Box>
			<Box
				position={"absolute"}
				bottom={0}
				height={insets.bottom}
				backgroundColor={"white"}
				width={"100%"}
			/>
		</WrapperWithDefaultBeasyBackgroundAndSafeAreaFull>
	);
};

export default UserLoginScreen;