import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
import { type IorangePaymentStarter, getTransactionsData } from "@/utils/requests/orangePayment";
import BeasyLogoIcon from "@components/BeasyLogoIcon";
import Button from "@components/Button";
import GoBackIconButton from "@components/GoBackIconButton";
import Input from "@components/Input";
import PaymentOption from "@components/PaymentOption";
import BackgroundDefault from "@components/backgrounds/BackgroundDefault";
import Box from "@components/bases/Box";
import Text from "@components/bases/Text";
import { useMutation } from "@tanstack/react-query";
import * as WebBrowser from "expo-web-browser";
import { useCallback, useState } from "react";
import { useSafeAreaInsets } from "react-native-safe-area-context";

const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountInputScreen"> = ({
	route,
	navigation,
}) => {
	const { paymentType } = route.params;
	const [amountToPay, setAmountToPay] = useState(0);

	const insets = useSafeAreaInsets();

	const updateAmountToPay = (amount: string) => {
		const amountParsed = Number.parseInt(amount);
		if (!Number.isNaN(amountParsed)) {
			return setAmountToPay(amountParsed);
		}

		return setAmountToPay(0);
	};

	const dummyObject: IorangePaymentStarter = {
		// biome-ignore lint/style/useNamingConvention: <API requirements>
		type_paiement: 1,
		marchand: "1",
		service: "1",
		montant: 10,
		commentaire: "commentaire",
		numero: "0707070707",
	};

	const omPaymentMutation = useMutation({
		mutationFn: (amount: number) =>
			getTransactionsData({
				// biome-ignore lint/style/useNamingConvention: <explanation>
				type_paiement: 1,
				marchand: "1",
				service: "1",
				montant: amount,
				numero: "0707070707",
				commentaire: "Un commentaire",
			}),
		onSuccess: async (data) => {
			const result = await WebBrowser.openBrowserAsync(data.payment_url);
			// setResult(result);
			console.log("result", result);
		},
		onError: (err) => {
			console.log("om start error ", err);
		},
	});

	const _handlePressButtonAsync = async () => {
		console.log("openning browser ! ");
		const result = await WebBrowser.openBrowserAsync(
			"https://mpayment.orange-money.com/sx/mpayment/abstract/v13r49t9xznfvjxxngu31gz1ecpeenhpaethdyl4psuhzwlws64vvyixqywa8zcf",
		);
		// setResult(result);
		console.log("result", result);
	};

	const handlePaymentButton = useCallback(() => {
		switch (paymentType) {
			case "OM":
				console.log("OM so we stays on screen !!");
				console.log("Calling api with amount :: ", amountToPay);
				omPaymentMutation.mutate(amountToPay);
				break;
			default:
				navigation.navigate("numberAndOtpForPaymentScreen");
				break;
		}
	}, [amountToPay, omPaymentMutation, paymentType, navigation]);

	return (
		<BackgroundDefault>
			{/* <SafeAreaView> */}
			<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 height={150} alignItems={"center"} justifyContent={"center"}>
						<BalanceContainer balance={78000} label="Total des ventes" />
					</Box> */}
				<Box height={90} padding={"s"} paddingLeft={"l"}>
					<Text color={"black"}>Montant à payé</Text>
					<Text color={"black"} variant={"header"}>
						{amountToPay}
					</Text>
				</Box>
				<Box
					p={"l"}
					paddingTop={"xl"}
					backgroundColor={"white"}
					flex={1}
					borderTopLeftRadius={20}
					borderTopRightRadius={20}
				>
					<Box width={75} height={50} mb={"l"} borderRadius={10} overflow={"hidden"}>
						<PaymentOption onPress={() => {}} paymentMethod={paymentType} />
					</Box>
					<Box mb={"xl"}>
						<Input
							label="Entrez le montant"
							autoFocus={true}
							keyboardType="numeric"
							onChangeText={(e) => updateAmountToPay(e)}
						/>
					</Box>
					<Button
						onPress={handlePaymentButton}
						variant={"full"}
						textVariants={"primary"}
						label="Payer"
					/>
				</Box>
			</Box>
			{/* </SafeAreaView> */}
		</BackgroundDefault>
	);
};

export default PaymentAmountInputScreen;