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

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

const WaveQrCodePaymentScreen: MainStackScreenComponentProps<"waveQrCodePaymentScreen"> = ({
	route,
	navigation,
}) => {
	log.verbose("WaveQrCodePaymentScreen");
	const data = route.params.data;
	const windowWidth = Dimensions.get("window").width;
	const { handlePaymentVerification } = useWave();

	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={data.wave_launch_url}
						size={windowWidth - 120}
						// backgroundColor={theme.colors.secondary}
					/>
				</Box>
				<Text>Veuillez scanner le QR Code pour terminer le paiement</Text>
				<Box width={"100%"} mt={"x100"}>
					<Button
						variant={"full"}
						textVariants={"white"}
						label="Verification"
						onPress={() => handlePaymentVerification(data.id)}
					/>
				</Box>
			</Box>
		</BackgroundWithBeasyIconAndWhiteContentArea>
	);
};

export default WaveQrCodePaymentScreen;