import React, { createContext, useState, useEffect, useContext } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import GlobalModel from "../../components/common/GlobalModel";
import { useFab } from "../../Context/FabContext";
// import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "../../components/PaymentRequest/PaymentRequestSchema";
import ManageRecurringExpense from "../../components/RecurringExpense/ManageRecurringExpense";
import RecurringExpenseList from "../../components/RecurringExpense/RecurringRexpenseList";

export const RecurringExpenseContext = createContext();
export const useRecurringExpenseContext = () => {
    const context = useContext(RecurringExpenseContext);
    if (!context) {
        throw new Error("useRecurringExpenseContext must be used within an ExpenseProvider");
    }
    return context;
};
const RecurringExpensePage = () => {
    const [ManageRequest, setManageRequest] = useState({
        IsOpen: null,
        RequestId: null,
    });
    const [ViewRequest, setVieRequest] = useState({ view: false, requestId: null })
    const { setOffcanvasContent, setShowTrigger } = useFab();
    //   const [filters, setFilters] = useState(defaultPaymentRequestFilter);

    const [search, setSearch] = useState("");

    const contextValue = {
        setManageRequest,
        setVieRequest
    };

    useEffect(() => {

        setShowTrigger(true);
        setOffcanvasContent(
            "Payment Request Filters",
            //   <PaymentRequestFilterPanel onApply={setFilters} />
        );

        return () => {
            setShowTrigger(false);
            setOffcanvasContent("", null);
        };
    }, []);

    return (
        <RecurringExpenseContext.Provider value={contextValue}>
            <div className="container-fluid">
                {/* Breadcrumb */}
                <Breadcrumb
                    data={[             
                        { label: "Home", link: "/dashboard" },
                        { label: "Recurring Expense", link: null },
                    ]}
                />

                {/* Top Bar */}
                <div className="card my-3 px-sm-4 px-0">
                    <div className="card-body py-2 px-3">
                        <div className="row align-items-center">
                            <div className="col-6">
                                <input
                                    type="search"
                                    className="form-control form-control-sm w-auto"
                                    placeholder="Search Recurring Expense.."
                                    value={search}
                                //   onChange={(e) => setSearch(e.target.value)}
                                />
                            </div>

                            <div className="col-6 text-end mt-2 mt-sm-0">
                                <button
                                    className="btn btn-sm btn-primary"
                                    type="button"
                                    onClick={() =>
                                        setManageRequest({
                                            IsOpen: true,
                                            expenseId: null,
                                        })
                                    }
                                >
                                    <i className="bx bx-plus-circle me-2"></i>
                                    <span className="d-none d-md-inline-block">
                                        Add Payment Request
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                {/* <PaymentRequestList
          search={search}
          filters={filters}
        /> */}
        <RecurringExpenseList/>

                {/* Add/Edit Modal */}
                {ManageRequest.IsOpen && (
                    <GlobalModel
                        isOpen
                        size="lg"
                        closeModal={() =>
                            setManageRequest({ IsOpen: null, expenseId: null })
                        }
                    >
                        <ManageRecurringExpense
                            key={ManageRequest.RequestId ?? "new"}
                            requestToEdit={ManageRequest.RequestId}
                            closeModal={() =>
                                setManageRequest({ IsOpen: null, RequestId: null })
                            }
                        />
                    </GlobalModel>
                )}

                {/* {ViewRequest.view && (
          <GlobalModel
            isOpen
            size="xl"
            modalType="top"
            closeModal={() => setVieRequest({ requestId: null, view: false })}
          >
            <ViewPaymentRequest  requestId={ViewRequest?.requestId}/>
          </GlobalModel>
        )} */}

            </div>
        </RecurringExpenseContext.Provider>
    );
};

export default RecurringExpensePage;