import { asp as g } from "@asp/asp";
import { BarnoinPayBackground } from "@components/BarnoinPayBackground";
import BeasyLogoIcon from "@components/BeasyLogoIcon";
import * as Button from "@components/Button";
import * as Modal from "@components/Modal";
import AntDesign from "@expo/vector-icons/AntDesign";
import { LOG } from "@logger";
import { useMutation } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import { useState } from "react";
import { Dimensions, ScrollView, Text, View } from "react-native";
import QrCode from "react-native-qrcode-svg";
import { waveGetTransactionStatus } from "@/features/pay/api";
import type { MainStackScreenComponentProps } from "@/navigations/types";

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

const WaveQrCodePaymentScreen: MainStackScreenComponentProps<"waveQrCodePaymentScreen"> = ({
	route,
	navigation,
}) => {
	log.verbose("WaveQrCodePaymentScreen");
	const [error, setError] = useState("");
	const data = route.params.data;
	const windowWidth = Dimensions.get("window").width;
	const qrSize = windowWidth * 0.7;
	const [isSuccess, setIsSuccess] = useState(false);

	const query = useMutation({
		mutationKey: ["waveTransactionStatus", data.id],
		mutationFn: () => waveGetTransactionStatus(data.id),
		onError: (err: AxiosError) => {
			setError(JSON.stringify(err.response?.data) || err.message);
		},
		onSuccess: (_data) => {
			setIsSuccess(true);
		},
	});

	return (
		<BarnoinPayBackground style={[g.justify_between]}>
			<View style={[g.px_lg, g.flex_row, g.align_center, g.justify_between]}>
				<BeasyLogoIcon />
				<AntDesign
					name="arrowleft"
					size={24}
					color="black"
					onPress={() => navigation.goBack()}
				/>
			</View>
			<View
				style={[
					g.w_full,
					g.p_5xl,
					g.gap_xl,
					{
						backgroundColor: "white",
						borderTopLeftRadius: 20,
						borderTopRightRadius: 20,
						height: "80%",
					},
				]}
			>
				<Text style={[g.text_3xl, g.font_bold]}>Votre QR Code</Text>

				<View
					style={[
						g.w_full,
						g.align_center,
						g.justify_center,
						g.p_md,
						g.rounded_lg,
						g.shadow_elevated,
						{ aspectRatio: 1, backgroundColor: "white" },
					]}
				>
					<QrCode value={data.wave_launch_url} size={qrSize} />
				</View>
				<Text>Veuillez scanner le QR Code pour terminer le paiement</Text>
				<Button.Container onPress={() => query.mutate()} isLoading={query.isPending}>
					<Button.Label>Verification</Button.Label>
				</Button.Container>
			</View>

			<Modal.RnModal visible={!!error} style={{ backgroundColor: "rgba(0, 0, 0, 0.25)" }}>
				<Modal.OuterView
					style={[
						g.p_md,
						g.shadow_elevated,
						{ backgroundColor: "white", width: "80%", height: "40%" },
					]}
				>
					<View style={[g.flex_1, g.gap_md]}>
						<ScrollView style={[g.flex_1]}>
							<Text>{error}</Text>
						</ScrollView>

						<Button.Container onPress={() => setError("")}>
							<Button.Label>OK</Button.Label>
						</Button.Container>
					</View>
				</Modal.OuterView>
			</Modal.RnModal>

			<Modal.RnModal visible={isSuccess} style={{ backgroundColor: "rgba(0, 0, 0, 0.25)" }}>
				<Modal.OuterView
					style={[
						g.p_md,
						g.shadow_elevated,
						{ backgroundColor: "white", width: "80%", height: "40%" },
					]}
				>
					<View style={[g.flex_1, g.gap_md]}>
						<Text style={[g.text_center]}>Transaction réussie</Text>

						<Button.Container
							onPress={() => navigation.getParent()?.navigate("paymentResultScreen")}
						>
							<Button.Label>OK</Button.Label>
						</Button.Container>
					</View>
				</Modal.OuterView>
			</Modal.RnModal>
		</BarnoinPayBackground>
	);
};

export default WaveQrCodePaymentScreen;