import Button from "@components/Button";
import Input from "@components/Input";
import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
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, SafeAreaView, TouchableOpacity, View } from "react-native";

const UserLoginScreen = () => {
	return (
		<BackgroundGreenWhiteContentArea>
			<SafeAreaView style={{ flex: 1 }}>
				<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
					style={[containers.containerFull]}
					p={"xl"}
					paddingTop={"x240"}
					flexDirection={"column"}
					justifyContent={"space-between"}
				>
					<KeyboardAvoidingView
						behavior={Platform.OS === "ios" ? "height" : "height"}
						style={{ flex: 1 }}
					>
						<View>
							<Box mb={"x100"}>
								<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 mt={"xl"}>
						<Button
							variant={"full"}
							textVariants={"primary"}
							label="Se connecter"
							onPress={() => {}}
						/>
						<Button
							variant={"lightGray"}
							textVariants={"black"}
							label="Creer un compte"
							onPress={() => {}}
						/>
					</Box>
				</Box>
			</SafeAreaView>
		</BackgroundGreenWhiteContentArea>
	);
};

export default UserLoginScreen;
