import React, { useState, createContext, useEffect, useContext } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
// ------Components-------
import Breadcrumb from "../../components/common/Breadcrumb";
import TenantsList from "../../components/Tenanat/TenantsList";
import { useNavigate } from "react-router-dom";
import { useDebounce } from "../../utils/appUtils";
import { useFab } from "../../Context/FabContext";

//---------- Schema and defaultValues----
import {
  defaultFilterValues,
  filterSchema,
} from "../../components/Tenanat/TenantSchema";
import TenantFilterPanel from "../../components/Tenanat/TenantFilterPanel";

// This is context that wrapping all components tenant releated , but must pass inside 'TenantContext.Provider'
export const TenantContext = createContext();
export const useTenantContext = () => {
  const context = useContext(TenantContext);
  if (!context) {
    throw new Error("useTenantContext must be used within an TenantProvider");
  }
  return context;
};

const TenantPage = () => {
  const [searchText, setSearchText] = useState("");
  const [isRefetching,setRefetching] = useState(false)
  const [refetchFn, setRefetchFn] = useState(null);
    const [filters, setFilter] = useState();
  const debouncedSearch = useDebounce(searchText, 500);
  const contextValue = {
  };
  const navigate = useNavigate();

  const { setOffcanvasContent, setShowTrigger } = useFab();

  // This Hook allow us to right-side bar for filter Tenants

    const methods = useForm({
      resolver: zodResolver(filterSchema),
      defaultValues: defaultFilterValues,
    });
  
    const { reset } = methods;
  useEffect(() => {
    setShowTrigger(true);
    setOffcanvasContent("Tenant Filters", <TenantFilterPanel  onApply={setFilter}
         />);
    return () => {
      setShowTrigger(false);
      setOffcanvasContent("", null);
    };
  }, []);

  return (
    <TenantContext.Provider value={contextValue}>
      <div className="container-fluid">
        <Breadcrumb
          data={[
            { label: "Home", link: "/dashboard" },
            { label: "Tenant", link: null },
          ]}
        />

        <div className="card d-flex p-2">
          <div className="row align-items-center">
            <div className="col-6 col-md-6 col-lg-3  mb-md-0">
              <input
                type="search"
                value={searchText}
                onChange={(e)=>setSearchText(e.target.value)}
                className="form-control form-control-sm"
                placeholder="Search Tenant"
              />
            </div>

            <div className="col-6 col-md-6 col-lg-9 text-end cursor-pointer">
              <span className="text-tiny text-muted  p-1 border-0 bg-none lead mx-3  " disabled={isRefetching} onClick={() => refetchFn && refetchFn()}>
                Refresh <i className={`bx bx-refresh ms-1  ${isRefetching ? "bx-spin":""}`}></i>
              </span>

              <button
                type="button"
                data-bs-toggle="tooltip"
                data-bs-offset="0,8"
                data-bs-placement="top"
                data-bs-custom-class="tooltip"
                title="Add New Tenant"
                className="p-1 bg-primary rounded-circle"
                onClick={() => navigate("/tenants/new-tenant")}
              >
                <i className="bx bx-plus fs-4 text-white"></i>
              </button>
            </div>
          </div>
        </div>

        <TenantsList   filters={filters}  searchText={debouncedSearch}      setIsRefetching={setRefetching}
          setRefetchFn={setRefetchFn}
     />
      </div>
    </TenantContext.Provider>
  );
};

export default TenantPage;