import {PaymentIntention} from "@/interfaces/paymob";
import {DurationUnit} from "@/interfaces/paypal";
import {User} from "@/interfaces/user";
import axios from "axios";
import {useRouter} from "next/router";
import {useState} from "react";
import Button from "./Low/Button";
import Input from "./Low/Input";
import Modal from "./Modal";

interface Props {
	user: User;
	currency: string;
	price: number;
	setIsPaymentLoading: (v: boolean) => void;
	duration: number;
	duration_unit: DurationUnit;
	onSuccess: (duration: number, duration_unit: DurationUnit) => void;
}

export default function PaymobPayment({user, price, setIsPaymentLoading, currency, duration, duration_unit, onSuccess}: Props) {
	const [isLoading, setIsLoading] = useState(false);

	const router = useRouter();

	const handleCardPayment = async () => {
		try {
			setIsPaymentLoading(true);

			const paymentIntention: PaymentIntention = {
				amount: price * 1000,
				currency: "OMR",
				items: [],
				payment_methods: [],
				customer: {
					email: user.email,
					first_name: user.name.split(" ")[0],
					last_name: [...user.name.split(" ")].pop() || "N/A",
					extras: {
						re: user.id,
					},
				},
				billing_data: {
					apartment: "N/A",
					building: "N/A",
					country: user.demographicInformation?.country || "N/A",
					email: user.email,
					first_name: user.name.split(" ")[0],
					last_name: [...user.name.split(" ")].pop() || "N/A",
					floor: "N/A",
					phone_number: user.demographicInformation?.phone || "N/A",
					state: "N/A",
					street: "N/A",
				},
				extras: {
					userID: user.id,
					duration,
					duration_unit,
				},
			};

			const response = await axios.post<{iframeURL: string}>(`/api/paymob`, paymentIntention);

			router.push(response.data.iframeURL);
		} catch (error) {
			console.error("Error starting card payment process:", error);
		}
	};

	return (
		<>
			<Button isLoading={isLoading} onClick={handleCardPayment}>
				Select
			</Button>
		</>
	);
}