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 { useContext, useState } from "react";
import AddSubscriptionPayment from "./AddSubscriptionPayment";
import { useNavigate } from "react-router-dom";
import { UserContext } from "../../../Context/UserContextAPI";
const SubscriptionPayment = () => {
  const { accessPerm } = useContext(UserContext);
  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) => (
        <>
          {accessPerm(77, 5) && (
            <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;