import React, { createContext, useContext, useState } from "react";

import ExpenseList from "../../components/Expenses/ExpenseList";
import CreateExpense from "../../components/Expenses/CreateExpense";
import ViewExpense from "../../components/Expenses/ViewExpense";
import Breadcrumb from "../../components/common/Breadcrumb";
import GlobalModel from "../../components/common/GlobalModel";
import PreviewDocument from "../../components/Expenses/PreviewDocument";

export const ExpenseContext = createContext();
export const useExpenseContext = () => useContext(ExpenseContext);

const ExpensePage = () => {
  const [isNewExpense, setNewExpense] = useState(false);
  const [viewExpense, setViewExpense] = useState({
    expenseId: null,
    view: false,
  });
  const [ViewDocument, setDocumentView] = useState({
    IsOpen: false,
    Image: null,
  });

  const contextValue = {
    setViewExpense,
    setDocumentView,
  };

  return (
    <ExpenseContext.Provider value={contextValue}>
      <div className="container-fluid">
        <Breadcrumb
          data={[
            { label: "Home", link: "/" },
            { label: "Expense", link: null },
          ]}
        />
        <div className="card my-1 text-start px-0">
          <div className="card-body py-1 px-1">
            <div className="row">
              <div className="col-5 col-sm-4">
                <label className="mb-0">
                  <input
                    type="search"
                    className="form-control form-control-sm"
                    placeholder="Search Expense..."
                    aria-controls="DataTables_Table_0"
                  />
                </label>
                <i className="bx bx-slider-alt ms-2"></i>
              </div>
              <div className="col-7 col-sm-8 text-end gap-2">
                <button
                  type="button"
                  data-bs-toggle="tooltip"
                  data-bs-offset="0,8"
                  data-bs-placement="top"
                  data-bs-custom-class="tooltip"
                  title="Add New Expense"
                  className={`p-1 me-2 bg-primary rounded-circle `}
                  onClick={() => setNewExpense(true)}
                >
                  <i className="bx bx-plus fs-4 text-white"></i>
                </button>
              </div>
            </div>
          </div>
        </div>

        <ExpenseList />

        {isNewExpense && (
          <GlobalModel
            isOpen={isNewExpense}
            size="lg"
            closeModal={() => setNewExpense(false)}
          >
            <CreateExpense closeModal={() => setNewExpense(false)} />
          </GlobalModel>
        )}

        {viewExpense.view && (
          <GlobalModel
            isOpen={viewExpense.view}
            size="lg"
            modalType="top"
            closeModal={() =>
              setViewExpense({
                expenseId: null,
                view: false,
              })
            }
          >
            <ViewExpense ExpenseId={viewExpense.expenseId} />
          </GlobalModel>
        )}

        {ViewDocument.IsOpen && (
          <GlobalModel
            size="lg"
            m
            isOpen={ViewDocument.IsOpen}
            closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
          >
            <PreviewDocument imageUrl={ViewDocument.Image} />
          </GlobalModel>
        )}
      </div>
    </ExpenseContext.Provider>
  );
};

export default ExpensePage;