import React, { createContext, useState, useEffect, useContext } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import GlobalModel from "../../components/common/GlobalModel";
import ManagePaymentRequest from "../../components/PaymentRequest/ManagePaymentRequest";
import ExpenseFilterPanel from "../../components/Expenses/ExpenseFilterPanel";
import { useFab } from "../../Context/FabContext";
import PaymentRequestList from "../../components/PaymentRequest/PaymentRequestList";
import PaymentRequestFilterPanel from "../../components/PaymentRequest/PaymentRequestFilterPanel";
import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "../../components/PaymentRequest/PaymentRequestSchema";
import ViewPaymentRequest from "../../components/PaymentRequest/ViewPaymentRequest";

export const PaymentRequestContext = createContext();
export const usePaymentRequestContext = () => {
  const context = useContext(PaymentRequestContext);
  if (!context) {
    throw new Error("usePaymentRequestContext must be used within an ExpenseProvider");
  }
  return context;
};
const PaymentRequestPage = () => {
  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 (
    <PaymentRequestContext.Provider value={contextValue}>
      <div className="container-fluid">
        {/* Breadcrumb */}
        <Breadcrumb
          data={[
            { label: "Home", link: "/" },
            { label: "Finance", link: "/Payment Request" },
            { label: "Payment Request" },
          ]}
        />

        {/* 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 Payment Req.."
                  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}
        />

        {/* Add/Edit Modal */}
        {ManageRequest.IsOpen && (
          <GlobalModel
            isOpen
            size="lg"
            closeModal={() =>
              setManageRequest({ IsOpen: null, expenseId: null })
            }
          >
            <ManagePaymentRequest
              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>
    </PaymentRequestContext.Provider>
  );
};

export default PaymentRequestPage;