import React, {
  createContext,
  useContext,
  useEffect,
  useMemo,
  useState,
} from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import { useEmployee } from "../../hooks/useEmployees";
import EmployeeSearchInput from "../../components/common/EmployeeSearchInput";
import { useForm } from "react-hook-form";
import Label from "../../components/common/Label";
import AdvancePaymentList from "../../components/AdvancePayment/AdvancePaymentList";
import { employee } from "../../data/masters";
import { formatFigure } from "../../utils/appUtils";

export const AdvancePaymentContext = createContext();
export const useAdvancePaymentContext = () => {
  const context = useContext(AdvancePaymentContext);
  if (!context) {
    throw new Error(
      "useAdvancePaymentContext must be used within an AdvancePaymentProvider"
    );
  }
  return context;
};
const AdvancePaymentPage = () => {
  const [balance, setBalance] = useState(null);
  const { control, reset, watch } = useForm({
    defaultValues: {
      employeeId: "",
    },
  });

  const selectedEmployeeId = watch("employeeId");
  useEffect(() => {
    const selectedEmpoyee = sessionStorage.getItem("transaction-empId");
    reset({
      employeeId: selectedEmpoyee || "",
    });
  }, [reset]);

  return (
    <AdvancePaymentContext.Provider value={{ setBalance }}>
      <div className="container-fluid">
        <Breadcrumb
          data={[
            { label: "Home", link: "/dashboard" },
            { label: "Finance", link: "/advance-payment" },
            { label: "Advance Payment" },
          ]}
        />
        <div className="card px-4 py-2 page-min-h ">
          <div className="row py-1">
            <div className="col-12 col-md-4">
              <div className="d-block  text-start">
                <EmployeeSearchInput
                  control={control}
                  name="employeeId"
                  projectId={null}
                  forAll={true}
                  placeholder={"Enter Employee Name"}
                />
              </div>
            </div>
            <div className="col-md-8 d-flex align-items-center justify-content-end">
              {balance ? (
                <>
                  <label className="fs-5 fw-semibold">Current Balance : </label>
                  <span
                    className={`${
                      balance > 0 ? "text-success" : "text-danger"
                    } fs-5 fw-bold ms-1`}
                  >
                    {balance > 0 ? (
                      <i className="bx bx-plus b-sm"></i>
                    ) : (
                      <i className="bx bx-minus b-sm"></i>
                    )}{" "}
                    {formatFigure(balance, {
                      type: "currency",
                      currency: "INR",
                    })}
                  </span>
                </>
              ) : (
                <></>
              )}
            </div>
          </div>
          <AdvancePaymentList employeeId={selectedEmployeeId} />
        </div>
      </div>
    </AdvancePaymentContext.Provider>
  );
};

export default AdvancePaymentPage;