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";

const UserLoginScreen = () => {
	return (
		<BackgroundDefault>
			<View style={containers.containerFull}>
				<Box style={{ height: "20%" }} p={"l"} paddingTop={"x64"}>
					<Box
						px={"m"}
						justifyContent={"space-between"}
						flexDirection={"row"}
						alignItems={"center"}
					>
						<Fontisto name="close-a" size={12} color="black" />

						<TouchableOpacity>
							<Text>Mot de passe oublie ?</Text>
						</TouchableOpacity>
					</Box>
				</Box>
				<ContainerBorderTopCurved>
					<Box p={"l"} style={{ height: "70%" }} paddingTop={"x100"}>
						<KeyboardAvoidingView
							behavior={Platform.OS === "ios" ? "height" : "height"}
							style={{ flex: 1 }}
						>
							<View>
								<Box mb={"x64"}>
									<Text fontSize={40} fontWeight={"bold"}>
										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>
							</View>
						</KeyboardAvoidingView>
					</Box>
					<Box style={{ height: "20%" }} p={"s"}>
						<Button
							variant={"full"}
							textVariants={"primary"}
							label="Se connecter"
							onPress={() => {}}
						/>
						<Button
							variant={"lightGray"}
							textVariants={"black"}
							label="Creer un compte"
							onPress={() => {}}
						/>
					</Box>
				</ContainerBorderTopCurved>
			</View>
			{/* <SafeAreaView style={containers.containerFlexUno}> */}

			{/* </SafeAreaView> */}
		</BackgroundDefault>
	);
};

export default UserLoginScreen;