import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
import BeasyLogoIcon from "@components/BeasyLogoIcon";
import Button from "@components/Button";
import GoBackIconButton from "@components/GoBackIconButton";
import BackgroundDefault from "@components/backgrounds/BackgroundDefault";
import Box from "@components/bases/Box";
import Text from "@components/bases/Text";
import { LOG } from "@logger";
// import { Text } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";

const log = LOG.extend("PaymentResultScreen");

const PaymentResultScreen: PaymentStackScreenComponentProps<"paymentResultScreen"> = ({
	route,
	navigation,
}) => {
	const insets = useSafeAreaInsets();
	log.debug("insets", insets);
	return (
		<BackgroundDefault>
			<SafeAreaView edges={["top", "left", "right"]}>
				<Box
					style={{
						height: "100%",
						width: "100%",
						// marginTop: insets.top,
					}}
				>
					<Box
						px={"l"}
						flexDirection={"row"}
						justifyContent={"space-between"}
						alignItems={"center"}
						mb={"m"}
					>
						<BeasyLogoIcon />
						<GoBackIconButton onPress={() => navigation.goBack()} />
					</Box>
					<Box
						flex={1}
						backgroundColor={"white"}
						borderRadius={20}
						p={"l"}
						flexDirection={"column"}
						gap={"l"}
					>
						<Text variant={"secondary"} fontWeight={"bold"} textAlign={"center"}>
							Transactions effectué avec succès !
						</Text>
						<Button
							width={200}
							alignSelf={"center"}
							variant={"full"}
							textVariants={"white"}
							label={"Imprimer le réçu"}
							onPress={() => {}}
						/>
						<Box backgroundColor={"lightGray"} flex={1} borderRadius={20} p={"l"}>
							<Box
								flexDirection={"row"}
								justifyContent={"space-between"}
								borderBottomColor={"gray"}
								borderBottomWidth={1}
								py={"m"}
							>
								<Text fontWeight={"bold"}>Caisse</Text>
								<Text variant={"black"}>00147C</Text>
							</Box>
							<Box
								flexDirection={"row"}
								justifyContent={"space-between"}
								borderBottomColor={"gray"}
								borderBottomWidth={1}
								py={"m"}
							>
								<Text fontWeight={"bold"}>Reference</Text>
								<Text variant={"black"}>CP...</Text>
							</Box>
							<Box
								flexDirection={"row"}
								justifyContent={"space-between"}
								borderBottomColor={"gray"}
								borderBottomWidth={1}
								py={"m"}
							>
								<Text fontWeight={"bold"}>Mode de paiement</Text>
								<Text variant={"black"}>Orange</Text>
							</Box>
							<Box
								flexDirection={"row"}
								justifyContent={"space-between"}
								borderBottomColor={"gray"}
								borderBottomWidth={1}
								py={"m"}
							>
								<Text fontWeight={"bold"}>Infos client</Text>
								<Text variant={"black"}>Dogeless Miso</Text>
							</Box>
							<Box
								flexDirection={"row"}
								justifyContent={"space-between"}
								borderBottomColor={"gray"}
								borderBottomWidth={1}
								py={"m"}
							>
								<Text fontWeight={"bold"}>Montant</Text>
								<Text variant={"black"}>10</Text>
							</Box>
							<Box
								flexDirection={"row"}
								justifyContent={"space-between"}
								borderBottomColor={"gray"}
								borderBottomWidth={1}
								py={"m"}
							>
								<Text fontWeight={"bold"}>N° Client</Text>
								<Text variant={"black"}>Dogeless Misso</Text>
							</Box>
						</Box>
					</Box>
				</Box>
			</SafeAreaView>
		</BackgroundDefault>
	);
};

export default PaymentResultScreen;
