import type { UnloggedUserStackScreenComponentProps } from "@/navigations/Types";
import Button from "@components/Button";
import ContainerBorderTopCurved from "@components/ContainerBorderTopCurved";
import Input from "@components/Input";
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 { containers } from "@styles/Commons";
import { KeyboardAvoidingView, Platform, TouchableOpacity, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

const UserLoginScreen: UnloggedUserStackScreenComponentProps<"userLoginScreen"> = ({
	navigation,
}) => {
	const insets = useSafeAreaInsets();

	return (
		<BackgroundDefault>
			<View style={[containers.containerFull, { paddingTop: insets.top }]}>
				<KeyboardAvoidingView
					behavior={Platform.OS === "ios" ? "height" : "height"}
					style={{ flex: 1 }}
				>
					<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>
						<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"}>
								<Input label="Email" />
								<Input label="Mot de passe" secureTextEntry={true} />
							</Box>
						</Box>
						<Box p={"s"}>
							<Button
								variant={"full"}
								textVariants={"primary"}
								label="Se connecter"
								onPress={() => navigation.navigate("bottomTabs")}
							/>
							<Button
								variant={"lightGray"}
								textVariants={"black"}
								label="Creer un compte"
								onPress={() => {}}
							/>
						</Box>
					</ContainerBorderTopCurved>
				</KeyboardAvoidingView>
			</View>
		</BackgroundDefault>
	);
};

export default UserLoginScreen;