import { useQuery } from "@tanstack/react-query";
import CardLayout from "../../../components/Layout/CardLayout";
import request from "../../../utils/request";
import ReactDataTable from "../../../components/Table/ReactDataTable";
import { format } from "date-fns";
import ModalLayout from "../../../components/Layout/ModalLayout";
import { useState } from "react";
import AddSubscriptionPayment from "./AddSubscriptionPayment";
import { useNavigate } from "react-router-dom";
const SubscriptionPayment = () => {
	const navigate = useNavigate();
	const { data, isLoading } = useQuery({
		queryKey: ["subscriptionPayment"],
		queryFn: async () => {
			const response = await request.getAll(
				"subscriptionPayment?payment_status=success",
			);
			return response?.status === "OK" ? response.data : [];
		},
		placeholderData: [],
	});

	const [modalState, setModalState] = useState({
		open: false,
		selectedData: null,
	});

	// columns
	const columns = [
		{
			name: "Payment Month",
			selector: (row) => format(new Date(row.payment_month), "MMMM yyyy"),
			wrap: true,
		},
		{
			name: "Transaction ID",
			selector: (row) => row.transaction_id,
			wrap: true,
		},
		{
			name: "Payment Date",
			selector: (row) => format(new Date(row.payment_date), "dd-MM-yyyy @p"),
			wrap: true,
		},
		{
			name: "Payment Amount (BDT)",
			selector: (row) => row.amount,
			wrap: true,
		},
		{
			name: "Payment Method",
			selector: (row) => row.payment_method,
			wrap: true,
		},
		{
			name: "Mobile Number",
			selector: (row) => row.customer_mobile,
			wrap: true,
		},
		{
			name: "Payment Status",
			selector: (row) => row.payment_status,
			wrap: true,
		},
		{
			name: "Remarks",
			selector: (row) => row.remarks,
			wrap: true,
		},
		{
			name: "Money Reciet",
			wrap: true,
			cell: (row) => (
				<button
					type="button"
					className="btn btn-primary"
					onClick={() =>
						navigate(`/dashboard/subscriptions/money-reciept/${row.id}`, {
							state: { data: row },
						})
					}
				>
					View
				</button>
			),
		},
	];

	return (
		<CardLayout
			title={"Subscription Payment"}
			// buttonTitle={"Add Subscription Payment"}
			// addButtonHandler={() => setModalState({ open: true })}
		>
			<ReactDataTable columns={columns} data={data} pending={isLoading} />

			{modalState.open && (
				<ModalLayout
					title={"Add Subscription Payment"}
					isOpen={modalState.open}
					onClose={() => setModalState({ open: false })}
					size={"lg"}
					backdrop={"static"}
				>
					<AddSubscriptionPayment subscriptionPayment={data} />
				</ModalLayout>
			)}
		</CardLayout>
	);
};

export default SubscriptionPayment;