import Box from "@components/bases/Box";
import {} from "react";
import {} from "react-native";

import { useUserAuthenticationContext } from "@/contexts/UserAuthenticationContext";
import Button from "@components/Button";
import BackgroundWithBeasyIconAndWhiteContentArea from "@components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea";
import Text from "@components/bases/Text";
import { LOG } from "@logger";

const log = LOG.extend("UserProfileScreen");
const UserProfileScreen = () => {
	log.verbose("UserProfileScreen");

	const { logout } = useUserAuthenticationContext();

	const { userInformations } = useUserAuthenticationContext();

	return (
		<BackgroundWithBeasyIconAndWhiteContentArea>
			<>
				<Box px={"m"} mt={"m"} gap={"m"}>
					{/* User Informations */}
					<Box
						width={"100%"}
						// height={200}
						backgroundColor={"lightGray"}
						borderRadius={10}
						p={"s"}
					>
						<Box
							width={"100%"}
							// height={"100%"}
							flexDirection={"row"}
							gap={"s"}
							py={"m"}
							borderBottomColor={"white"}
							borderBottomWidth={1}
						>
							<Box
								height={70}
								aspectRatio={1}
								borderRadius={50}
								backgroundColor={"secondary"}
							>
								<Text />
							</Box>

							<Box height={"100%"} flex={1} flexDirection={"column"}>
								<Text fontWeight={"bold"} variant={"black"} fontSize={20}>
									{userInformations.first_name} {userInformations.last_name}
								</Text>
								<Text>{userInformations.email}</Text>
							</Box>
						</Box>
						<Box
							width={"100%"}
							flexDirection={"row"}
							justifyContent={"space-between"}
							py={"m"}
						>
							<Text variant={"black"} fontWeight={"bold"}>
								Utilisateur
							</Text>
							<Text textAlign={"center"}>{userInformations.username}</Text>
						</Box>
					</Box>

					<Button
						label={"Deconnexion"}
						onPress={logout}
						variant={"danger"}
						textVariants={"white"}
					/>

					<Text fontWeight={"bold"}>Informations sur le marchand</Text>
					<Box
						width={"100%"}
						backgroundColor={"lightGray"}
						borderRadius={10}
						p={"s"}
						flexDirection={"column"}
						// gap={"m"}
					>
						<Box
							width={"100%"}
							flexDirection={"row"}
							borderBottomWidth={1}
							borderBottomColor={"white"}
							justifyContent={"space-between"}
							py={"m"}
						>
							<Text variant={"black"} fontWeight={"bold"}>
								Identifiant
							</Text>
							<Text textAlign={"center"}>
								{userInformations.marchand.marchand_id}
							</Text>
						</Box>
						<Box
							width={"100%"}
							flexDirection={"row"}
							borderBottomWidth={1}
							borderBottomColor={"white"}
							justifyContent={"space-between"}
							py={"m"}
						>
							<Text variant={"black"} fontWeight={"bold"}>
								Entreprise
							</Text>
							<Text textAlign={"center"}>{userInformations.marchand.nom}</Text>
						</Box>
						<Box
							width={"100%"}
							flexDirection={"row"}
							borderBottomWidth={1}
							borderBottomColor={"white"}
							justifyContent={"space-between"}
							py={"m"}
						>
							<Text variant={"black"} fontWeight={"bold"}>
								Code
							</Text>
							<Text textAlign={"center"}>{userInformations.marchand.code}</Text>
						</Box>
						<Box
							width={"100%"}
							flexDirection={"row"}
							borderBottomWidth={1}
							borderBottomColor={"white"}
							justifyContent={"space-between"}
							py={"m"}
						>
							<Text variant={"black"} fontWeight={"bold"}>
								Addresse
							</Text>
							<Text textAlign={"center"}>{userInformations.marchand.adresse}</Text>
						</Box>
						<Box
							width={"100%"}
							flexDirection={"row"}
							borderBottomWidth={1}
							borderBottomColor={"white"}
							justifyContent={"space-between"}
							py={"m"}
							alignItems={"center"}
						>
							<Text variant={"black"} fontWeight={"bold"}>
								Url succès
							</Text>
							<Text textAlign={"center"}>{userInformations.marchand.url_succes}</Text>
						</Box>
						<Box
							width={"100%"}
							flexDirection={"row"}
							justifyContent={"space-between"}
							// alignItems={"center"}
							py={"m"}
						>
							<Text variant={"black"} fontWeight={"bold"}>
								Url échec
							</Text>
							<Text textAlign={"center"}>{userInformations.marchand.url_echec}</Text>
						</Box>
					</Box>
				</Box>
			</>
		</BackgroundWithBeasyIconAndWhiteContentArea>
	);
};

export default UserProfileScreen;