import {PaymentIntention} from "@/interfaces/paymob";
import {DurationUnit} from "@/interfaces/paypal";
import {User} from "@/interfaces/user";
import axios from "axios";
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;
	packageID: string;
	setIsPaymentLoading: (v: boolean) => void;
	duration: number;
	duration_unit: DurationUnit;
	onSuccess: (duration: number, duration_unit: DurationUnit) => void;
}

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

	const [firstName, setFirstName] = useState(user.name.split(" ")[0]);
	const [lastName, setLastName] = useState([...user.name.split(" ")].pop());
	const [street, setStreet] = useState("");
	const [apartment, setApartment] = useState("");
	const [building, setBuilding] = useState("");
	const [state, setState] = useState("");
	const [floor, setFloor] = useState("");

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

			const paymentIntention: PaymentIntention = {
				amount: price * 1000,
				currency: "OMR",
				items: [],
				payment_methods: [1540],
				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: apartment || "N/A",
					building: 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: floor || "N/A",
					phone_number: user.demographicInformation?.phone || "N/A",
					state: state || "N/A",
					street: street || "N/A",
				},
				extras: {
					userID: user.id,
					packageID: packageID,
				},
			};

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

			window.open(response.data.iframeURL, "_blank", "noopener,noreferrer");
		} catch (error) {
			console.error("Error starting card payment process:", error);
		}
	};

	return (
		<>
			<Modal isOpen={isModalOpen} title="Billing Data" onClose={() => setIsModalOpen(false)}>
				<div className="flex flex-col gap-4 mt-4">
					<div className="grid grid-cols-2 gap-4">
						<Input label="First Name" value={firstName} onChange={setFirstName} type="text" name="firstName" />
						<Input label="Last Name" value={lastName} onChange={setLastName} type="text" name="lastName" />
					</div>
					<div className="grid grid-cols-3 -md:grid-cols-1 gap-4">
						<Input label="State" value={state} onChange={setState} type="text" name="state" />
						<Input label="Street" value={street} onChange={setStreet} type="text" name="street" />
						<Input label="Building" value={building} onChange={setBuilding} type="text" name="building" />
					</div>
					<div className="grid grid-cols-2 gap-4">
						<Input label="Floor" value={floor} onChange={setFloor} type="text" name="floor" />
						<Input label="Apartment" value={apartment} onChange={setApartment} type="text" name="apartment" />
					</div>
					<Button className="w-full max-w-[200px] self-end mt-4" disabled={!firstName || !lastName} onClick={handleCardPayment}>
						Complete Payment
					</Button>
				</div>
			</Modal>
			<Button isLoading={isLoading} onClick={() => setIsModalOpen(true)}>
				Select
			</Button>
		</>
	);
}