import type { MainStackScreenComponentProps } from "@/navigations/Types";
import BackgroundWithBeasyIconAndWhiteContentArea from "@components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea";
import Box from "@components/bases/Box";
import Text from "@components/bases/Text";
import { LOG } from "@logger";
import { Dimensions } from "react-native";
// biome-ignore lint/style/useNamingConvention: <explanation>
import QRCode from "react-native-qrcode-svg";

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

const WaveQrCodePaymentScreen: MainStackScreenComponentProps<"waveQrCodePaymentScreen"> = ({
	route,
	navigation,
}) => {
	const paymentUrl = route.params?.paymentUrl ?? "";
	console.log("paymentUrl", paymentUrl);
	const windowWidth = Dimensions.get("window").width;
	// const sixtyPercentHeight = window * 0.5;

	return (
		<BackgroundWithBeasyIconAndWhiteContentArea goBack={true}>
			<Box
				style={{
					height: "100%",
					width: "100%",
				}}
				p={"m"}
				alignItems={"center"}
			>
				<Text
					variant={"black"}
					mb={"l"}
					fontSize={20}
					textAlign={"center"}
					fontWeight={"bold"}
				>
					Votre QR Code
				</Text>

				<Box
					style={{ height: windowWidth - 80, aspectRatio: 1 }}
					backgroundColor={"primary"}
					alignItems={"center"}
					justifyContent={"center"}
					borderRadius={20}
					borderWidth={2}
					borderColor={"secondary"}
					shadowColor={"black"}
					shadowOffset={{ width: 0, height: 10 }}
					shadowOpacity={0.5}
					shadowRadius={13.16}
					elevation={20}
					mb={"l"}
				>
					<QRCode
						value={paymentUrl}
						size={windowWidth - 120}
						// backgroundColor={theme.colors.secondary}
					/>
				</Box>
				<Text>Veuillez scanner le QR Code pour terminer le paiement</Text>
			</Box>
		</BackgroundWithBeasyIconAndWhiteContentArea>
	);
};

export default WaveQrCodePaymentScreen;