import { useModalsManagerContext } from "@/contexts/ModalsManagerContext";
import { useUserAuthenticationContext } from "@/contexts/UserAuthenticationContext";
import type { MainStackScreenComponentProps } from "@/navigations/Types";
import Button from "@components/Button";
import Box from "@components/bases/Box";
import Text from "@components/bases/Text";
import { Image, StyleSheet } from "react-native";

const HomeUserNotLoggedIn: MainStackScreenComponentProps<"homeUserNotLoggedIn"> = ({
	navigation,
}) => {
	const { isAuthenticated } = useUserAuthenticationContext();
	const { showModal, closeModal } = useModalsManagerContext();

	if (isAuthenticated) {
		navigation.replace("appBottomTabsNavigator");
	}

	return (
		<>
			{/* <LoadingModal /> */}

			<Box style={style.container} p={"xl"} backgroundColor={"white"}>
				<Box mt={"s"}>
					<Box
						height={300}
						width={300}
						backgroundColor={"primary"}
						mb={"l"}
						alignItems={"center"}
						justifyContent={"center"}
					>
						<Image
							source={require("../../assets/payment_processing.png")}
							style={style.image}
						/>
					</Box>
					<Text color={"gray"} fontSize={16} textAlign={"center"}>
						Acceptez des paiements en magasin et en ligne et recevez votre argent en
						quelques secondes
					</Text>
					<Box mt={"xl"}>
						<Button
							variant={"full"}
							textVariants={"primary"}
							label="Se connecter"
							onPress={() => navigation.navigate("userLoginScreen")}
							// onPress={() =>
							// 	showModal(
							// 		<InformationModal
							// 			onPress={closeModal}
							// 			actionLabel="Se connecter"
							// 			// message="L'oiseau sur le baobab ne doit pas oublier qu'il à porter des lunettes"
							// 		/>,
							// 	)
							// }
						/>
						<Button
							variant={"clean"}
							textVariants={"secondary"}
							label="Creer un compte"
							onPress={() => {}}
						/>
					</Box>
				</Box>
			</Box>
		</>
	);
};

const style = StyleSheet.create({
	container: {
		width: "100%",
		height: "100%",
		flex: 1,
		alignItems: "center",
		justifyContent: "center",
	},
	image: {
		width: "100%",
		height: "100%",
	},
});

export default HomeUserNotLoggedIn;