import React, { createContext, useContext, useState } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import showToast from "../../services/toastService";
import GlobalModel from "../../components/common/GlobalModel";
import ManagePurchase from "../../components/purchase/ManagePurchase";
import PurchaseList from "../../components/purchase/PurchaseList";
import ViewPurchase from "../../components/purchase/ViewPurchase";

export const PurchaseContext = createContext();
export const usePurchaseContext = () => {
  let context = useContext(PurchaseContext);

  if (!context) {
    showToast("Please use Innne cntext", "warning");
    window.location = "/dashboard";
  }
  return context;
};
const PurchasePage = () => {
  const [searchText, setSearchText] = useState("");
  const [managePurchase, setManagePurchase] = useState({
    isOpen: false,
    purchaseId: null,
  });
  const [viewPurchaseState, setViewPurchase] = useState({
    isOpen: false,
    purchaseId: null,
  });

  const contextValue = {
    setViewPurchase,
    setManagePurchase,
  };
  return (
    <PurchaseContext.Provider value={contextValue}>
      <div className="container-fluid">
        <Breadcrumb
          data={[
            { label: "Home", link: "/dashboard" },
            { label: "Procurement & Inventory", link: "/purchase-invoice" },
            { label: "Purchase" },
          ]}
        />
        <div className="card">
          <div className="row p-2">
            <div className="col-12 col-md-6 text-start">
              {" "}
              <label className="mb-0">
                <input
                  type="search"
                  value={searchText}
                  onChange={(e) => setSearchText(e.target.value)}
                  className="form-control form-control-sm"
                  placeholder="Search Purchase"
                  aria-controls="DataTables_Table_0"
                />
              </label>
            </div>
            <di className="col-6 text-end">
              <button
                className="btn btn-sm btn-primary"
                onClick={() =>
                  setManagePurchase({
                    isOpen: true,
                    purchaseId: null,
                  })
                }
              >
                <i className="bx bx-plus-circle me-2"></i>Add
              </button>
            </di>
          </div>
        </div>

        <PurchaseList searchString={searchText} />
        {managePurchase.isOpen && (
          <GlobalModel
            isOpen={managePurchase.isOpen}
            size="lg"
            closeModal={() =>
              setManagePurchase({
                isOpen: false,
                purchaseId: null,
              })
            }
          >
            <ManagePurchase
              onClose={() =>
                setManagePurchase({
                  isOpen: false,
                  purchaseId: null,
                })
              }
              purchaseId={managePurchase.purchaseId}
            />
          </GlobalModel>
        )}

        {viewPurchaseState.isOpen && (
          <GlobalModel
            isOpen={viewPurchaseState.isOpen}
            size="xl"
            closeModal={() =>
              setViewPurchase({ isOpen: false, purchaseId: null })
            }
          >
            <ViewPurchase purchaseId={viewPurchaseState.purchaseId} />
          </GlobalModel>
        )}
      </div>
    </PurchaseContext.Provider>
  );
};

export default PurchasePage;