import DefaulHeader2 from "../components/header/DefaulHeader2";
import FilterSidebar from "../components/find-jobs/FilterSidebar";
import Footer from "../components/footer/Footer";
import LoginPopup from "../components/common/form/login/LoginPopup";
import MobileMenu from "../components/header/MobileMenu";
import FilterJobsBox from "../components/find-jobs/FilterJobsBox";
import Seo from "../components/common/Seo";
import Breadcrumb from "../components/common/Breadcrumb";
import { useState, useEffect } from "react";
import { useGetCompanies } from "../utils/hooks";

const FindJobs = () => {
  const [companyList, setCompanyList]: any = useState<Company[] | undefined>(
    []
  );
  const [pageInfo, setPageInfo] = useState<string | null>("/?page=1");
  const [sortAndFilterOptions, setSortAndFilterOptions] =
    useState<SortAndFilterOptionsType>({
      sortOption: "desc",
      titleSearchKeyword: "",
      locationSearchKeyword: "",
      jobTypeKeyword: "",
    });
  const [clearAllStateDisabled, setClearAllStateDisabled] = useState(false);

  const handleClearAll = () => {
    setClearAllStateDisabled(true);
    setSortAndFilterOptions({
      sortOption: "desc",
      titleSearchKeyword: "",
      locationSearchKeyword: "",
      jobTypeKeyword: "",
    });
  };
  const handleSortChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    if (e.target.value !== "") {
      setClearAllStateDisabled(false);
    }
    setSortAndFilterOptions({
      ...sortAndFilterOptions,
      sortOption: e.target.value,
    });
  };
  useEffect(() => {
    // Set job list to empty and reset page info
    // console.log("sortAndFilterOptions", sortAndFilterOptions);
    setCompanyList([]);
    setPageInfo("/?page=1");
  }, [sortAndFilterOptions]);
  useEffect(() => {
    // Call the function after jobList and pageInfo have been updated
    if (pageInfo === "/?page=1") {
      fetchCompanies();
    }
  }, [companyList, pageInfo]);
  const fetchCompanies = async () => {
    const { resp, status } = (await useGetCompanies(
      pageInfo,
      sortAndFilterOptions?.sortOption!,
      sortAndFilterOptions?.titleSearchKeyword,
      sortAndFilterOptions?.locationSearchKeyword
    )) as FilterJobsResp;
    setCompanyList([...companyList, ...resp.data]);
    setPageInfo(resp?.meta?.nextPageUrl);
  };
  return (
    <>
      <Seo pageTitle="Companies" />

      {/* <!-- Header Span --> */}
      <span className="header-span"></span>

      {/* End Login Popup Modal */}

      <DefaulHeader2 />
      {/* End Header with upload cv btn */}

      <MobileMenu />
      {/* End MobileMenu */}

      <Breadcrumb title="Companies" meta="Companies" />
      {/* <!--End Breadcrumb Start--> */}

      <section className="ls-section">
        <div className="auto-container">
          <div className="row">
            <div
              className="offcanvas offcanvas-start"
              tabIndex={-1}
              id="filter-sidebar"
              aria-labelledby="offcanvasLabel"
            >
              <div className="filters-column hide-left">
                <FilterSidebar
                  setSortAndFilterOptions={setSortAndFilterOptions}
                  sortAndFilterOptions={sortAndFilterOptions}
                  setClearAllStateDisabled={setClearAllStateDisabled}
                />
              </div>
            </div>
            {/* End filter column for tablet and mobile devices */}

            <div className="filters-column hidden-1023 col-lg-4 col-md-12 col-sm-12">
              <FilterSidebar
                setSortAndFilterOptions={setSortAndFilterOptions}
                sortAndFilterOptions={sortAndFilterOptions}
                setClearAllStateDisabled={setClearAllStateDisabled}
              />
            </div>
            {/* <!-- End Filters Column for destop and laptop --> */}

            <div className="content-column col-lg-8 col-md-12 col-sm-12">
              <div className="ls-outer">
                <FilterJobsBox
                  jobList={companyList}
                  handleClearAll={handleClearAll}
                  handleSortChange={handleSortChange}
                  clearAllStateDisabled={clearAllStateDisabled}
                  pageInfo={pageInfo}
                  recommendedJobsFunc={fetchCompanies}
                  sortAndFilterOptions={sortAndFilterOptions}
                  handleDateRangeChange={(
                    e: React.ChangeEvent<HTMLSelectElement>
                  ) => {}}
                />
                {/* <!-- ls Switcher --> */}
              </div>
            </div>
            {/* <!-- End Content Column --> */}
          </div>
          {/* End row */}
        </div>
        {/* End container */}
      </section>
      {/* <!--End Listing Page Section --> */}

      <Footer />
      {/* <!-- End Main Footer --> */}
    </>
  );
};

export default FindJobs;