import React, {
  createContext,
  useContext,
  useState,
  useRef,
  useEffect,
} from "react";
import {
  useForm,
  useFieldArray,
  FormProvider,
  useFormContext,
  Controller,
} from "react-hook-form";
import ExpenseList from "../../components/Expenses/ExpenseList";
import ViewExpense from "../../components/Expenses/ViewExpense";
import Breadcrumb from "../../components/common/Breadcrumb";
import GlobalModel from "../../components/common/GlobalModel";
import PreviewDocument from "../../components/Expenses/PreviewDocument";
import ManageExpense from "../../components/Expenses/ManageExpense";
import { useProjectName } from "../../hooks/useProjects";
import { useExpenseStatus } from "../../hooks/masterHook/useMaster";
import {
  useEmployees,
  useEmployeesAllOrByProjectId,
} from "../../hooks/useEmployees";
import { useSelector } from "react-redux";
import DateRangePicker from "../../components/common/DateRangePicker";
import SelectMultiple from "../../components/common/SelectMultiple";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  defaultFilter,
  SearchSchema,
} from "../../components/Expenses/ExpenseSchema";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { CREATE_EXEPENSE } from "../../utils/constants";

const SelectDropdown = ({
  label,
  options = [],
  loading = false,
  placeholder = "Select...",
  valueKey = "id",
  labelKey = "name",
  selectedValues = [],
  onChange,
  isMulti = false,
}) => {
  const handleChange = (e) => {
    const selected = Array.from(
      e.target.selectedOptions,
      (option) => option.value
    );
    onChange && onChange(selected);
  };

  return (
    <div className="select-dropdown">
      <label>{label}</label>
      <div className="dropdown-menu show">
        {options.map((option) => {
          const checked = selectedValues.includes(option[valueKey]);
          return (
            <div key={option[valueKey]} className="form-check">
              <input
                type="checkbox"
                className="form-check-input"
                id={`checkbox-${option[valueKey]}`}
                checked={checked}
                onChange={() => {
                  let newSelected;
                  if (checked) {
                    newSelected = selectedValues.filter(
                      (val) => val !== option[valueKey]
                    );
                  } else {
                    newSelected = [...selectedValues, option[valueKey]];
                  }
                  onChange(newSelected);
                }}
              />
              <label
                className="form-check-label"
                htmlFor={`checkbox-${option[valueKey]}`}
              >
                {option[labelKey] || option[valueKey]}
              </label>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export const ExpenseContext = createContext();
export const useExpenseContext = () => {
  const context = useContext(ExpenseContext);
  if (!context) {
    throw new Error("useExpenseContext must be used within an ExpenseProvider");
  }
  return context;
}

const ExpensePage = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [filters,setFilter] = useState()
  const IsCreatedAble = useHasUserPermission(CREATE_EXEPENSE)
  const dropdownRef = useRef(null);
  const shouldCloseOnOutsideClick = useRef(false);
  const selectedProjectId = useSelector(
    (store) => store.localVariables.projectId
  );
  const [ManageExpenseModal, setManageExpenseModal] = useState({
    IsOpen: null,
    expenseId: null,
  });
  const [viewExpense, setViewExpense] = useState({
    expenseId: null,
    view: false,
  });
  const [ViewDocument, setDocumentView] = useState({
    IsOpen: false,
    Image: null,
  });

  const contextValue = {
    setViewExpense,
    setManageExpenseModal,
    setDocumentView,
  };

  const methods = useForm({
    resolver: zodResolver(SearchSchema),
    defaultValues: defaultFilter,
  });
  const {
    register,
    handleSubmit,
    control,
    getValues,
    trigger,
    setValue,
    watch,
    reset,
    formState: { errors },
  } = methods;

  const { projectNames, loading: projectLoading } = useProjectName();
  const { ExpenseStatus, loading: statusLoading, error } = useExpenseStatus();
  const { employees, loading: empLoading } = useEmployeesAllOrByProjectId(
    true,
    selectedProjectId,
    true
  );

  const onSubmit = (data) => {
  setFilter(data)
  };
const isValidDate = (date) => {
  return date instanceof Date && !isNaN(date);
};

const setDateRange = ({ startDate, endDate }) => {
  const parsedStart = new Date(startDate);
  const parsedEnd = new Date(endDate);

  setValue(
    "startDate",
    isValidDate(parsedStart) ? parsedStart.toISOString().split("T")[0] : null
  );
  setValue(
    "endDate",
    isValidDate(parsedEnd) ? parsedEnd.toISOString().split("T")[0] : null
  );
};


  const toggleDropdown = () => {
    setIsOpen((prev) => {
      shouldCloseOnOutsideClick.current = !prev;
      return !prev;
    });
  };

  useEffect(() => {
    function handleClickOutside(event) {
      if (
        shouldCloseOnOutsideClick.current &&
        dropdownRef.current &&
        dropdownRef.current.contains(event.target)
      ) {
        setIsOpen(false);
      }
    }

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);
  const clearFilter =()=>{
    setFilter(
        {
          projectIds: [],
          statusIds: [],
          createdByIds: [],
          paidById: [],
          startDate: null,
          endDate: null,
        })
        reset()
    
  }

  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 d-flex aligin-items-center">
                <div
                  className="dropdown d-inline-block mt-2 align-items-center"
                  ref={dropdownRef}
                >
                  <i
                    className="bx bx-slider-alt ms-2"
                    role="button"
                    aria-expanded={isOpen}
                    style={{ cursor: "pointer" }}
                    onClick={() => setIsOpen((v) => !v)}
                  ></i>
                  {isOpen && (
                    <div
                      className="dropdown-menu p-3 overflow-hidden show d-flex align-items-center"
                      style={{ minWidth: "500px" }}
                    >
                      <FormProvider {...methods}>
                        <form
                          className="p-2 p-sm-0"
                          onSubmit={handleSubmit((data) => {
                            onSubmit(data);
                            setIsOpen(false);
                          })}
                        >
                          <div className="w-100">
                            <DateRangePicker
                              onRangeChange={setDateRange}
                              endDateMode="today"
                              DateDifference="6"
                              dateFormat="DD-MM-YYYY"
                            />
                          </div>

                          <div className="row g-2">
                            <div className="col-12 ">
                              <label className="form-label d-block text-secondary">
                                Select Status
                              </label>
                              <div className="d-flex flex-wrap">
                                {ExpenseStatus.map((status) => (
                                  <Controller
                                    key={status.id}
                                    control={control}
                                    name="statusIds"
                                    render={({
                                      field: { value = [], onChange },
                                    }) => (
                                      <div className="d-flex align-items-center me-4 mb-2">
                                        <input
                                          type="checkbox"
                                          className="form-check-input form-check-input-sm"
                                          value={status.id}
                                          checked={value.includes(status.id)}
                                          onChange={(e) => {
                                            if (e.target.checked) {
                                              onChange([...value, status.id]);
                                            } else {
                                              onChange(
                                                value.filter(
                                                  (v) => v !== status.id
                                                )
                                              );
                                            }
                                          }}
                                        />
                                        <label className="ms-2 mb-0">
                                          {status.displayName}
                                        </label>
                                      </div>
                                    )}
                                  />
                                ))}
                              </div>
                            </div>
                          </div>

                          <div className="row g-2">
                            <SelectMultiple
                              name="projectIds"
                              label="Select Projects"
                              options={projectNames}
                              labelKey="name"
                              valueKey="id"
                              IsLoading={projectLoading}
                            />
                            <SelectMultiple
                              name="createdByIds"
                              label="Select creator"
                              options={employees}
                              labelKey={(item) =>
                                `${item.firstName} ${item.lastName}`
                              }
                              valueKey="id"
                              IsLoading={empLoading}
                            />
                            <SelectMultiple
                              name="paidById"
                              label="Select Paid by"
                              options={employees}
                              labelKey={(item) =>
                                `${item.firstName} ${item.lastName}`
                              }
                              valueKey="id"
                              IsLoading={empLoading}
                            />
                          </div>
                          <div className="d-flex justify-content-end py-1 gap-2">
                            <button
                              type="button"
                              className="btn btn-secondary btn-xs"
                              onClick={() => {
                               clearFilter()
                                setIsOpen(false);
                              }}
                            >
                              Clear
                            </button>
                            <button
                              type="submit"
                              className="btn btn-primary btn-xs"
                            >
                              Apply
                            </button>
                          </div>
                        </form>
                      </FormProvider>
                    </div>
                  )}
                </div>
              </div>
              <div className="col-7 col-sm-8 text-end gap-2">
                {IsCreatedAble && (
                  <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={() =>
                    setManageExpenseModal({
                      IsOpen: true,
                      expenseId: null,
                    })
                  }
                >
                  <i className="bx bx-plus fs-4 text-white"></i>
                </button>
                )}
               
              </div>
            </div>
          </div>
        </div>

        <ExpenseList filters={filters} />
        {ManageExpenseModal.IsOpen && (
          <GlobalModel
            isOpen={ManageExpenseModal.IsOpen}
            size="lg"
            closeModal={() =>
              setManageExpenseModal({
                IsOpen: null,
                expenseId: null,
              })
            }
          >
            <ManageExpense
              key={ManageExpenseModal.expenseId ?? "new"}
              expenseToEdit={ManageExpenseModal.expenseId}
              closeModal={() =>
                setManageExpenseModal({ IsOpen: null, expenseId: null })
              }
            />
          </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"
            key={ViewDocument.IsOpen ?? "new"}
            isOpen={ViewDocument.IsOpen}
            closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
          >
            <PreviewDocument imageUrl={ViewDocument.Image} />
          </GlobalModel>
        )}
      </div>
    </ExpenseContext.Provider>
  );
};

export default ExpensePage;