import React, { useContext, useEffect, useState } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import LoginPopup from "../../components/common/form/login/LoginPopup";
import Seo from "../../components/common/Seo";
import FilterJobsBox from "../../components/find-jobs/FilterJobsBox";
import FilterSidebar from "../../components/find-jobs/FilterSidebar";
import Footer from "../../components/footer/Footer";
import DefaulHeader2 from "../../components/header/DefaulHeader2";
import MobileMenu from "../../components/header/MobileMenu";
import {
  // useGetCities,
  // useGetCountries,
  // useGetStates,
  useRecommendedJobs,
  useRecommendedJobsOpen,
} from "../../utils/hooks";
import { AuthContextType } from "../..";
import { AuthContext } from "../../contexts/auth";

const FindJobs = () => {
  const [jobList, setJobList]: any = useState<Job[] | undefined>([]);
  const [pageInfo, setPageInfo] = useState<string | null>("/?page=1");
  const [totalJobs, setTotalJobs] = useState<number>(0);

  // const [countries, setCountries] = useState<CountryData[]>();
  // const [selectedCountry, setSelectedCountry] = useState<string | null>(null);
  // const [states, setStates] = useState<StatesData[]>();
  // const [selectedState, setSelectedState] = useState<string | null>(null);
  // const [cities, setCities] = useState<CitiesData[]>();

  const [sortAndFilterOptions, setSortAndFilterOptions] =
    useState<SortAndFilterOptionsType>({
      sortOption: "desc",
      titleSearchKeyword: "",
      locationSearchKeyword: "",
      jobTypeKeyword: "",
      workModeKeyword: "",
      datePostedRange: "",
    });
  const [clearAllStateDisabled, setClearAllStateDisabled] =
    useState<boolean>(true);
  const { isAuthenticated } = useContext(AuthContext) as AuthContextType;

  useEffect(() => {
    recommendedJobsFunc();
    return () => {
      setJobList([]);
    };
  }, []);

  const handleClearAll = () => {
    setClearAllStateDisabled(true);
    setSortAndFilterOptions({
      sortOption: "desc",
      titleSearchKeyword: "",
      locationSearchKeyword: "",
      jobTypeKeyword: "",
      workModeKeyword: "",
      datePostedRange: "",
    });
  };

  const handleDateRangeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    if (e.target.value !== "") {
      setClearAllStateDisabled(false);
    }
    setSortAndFilterOptions({
      ...sortAndFilterOptions,
      datePostedRange: e.target.value,
    });
  };

  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);
    setJobList([]);
    setPageInfo("/?page=1");
  }, [sortAndFilterOptions]);

  useEffect(() => {
    // Call the function after jobList and pageInfo have been updated
    if (pageInfo === "/?page=1") {
      recommendedJobsFunc();
    }
  }, [jobList, pageInfo]);

  const recommendedJobsFunc = async (savedJobCalling?: boolean) => {
    if (savedJobCalling) {
      setJobList([...jobList]);
    } else {
      const { resp, status } = (await (
        isAuthenticated ? useRecommendedJobs : useRecommendedJobsOpen
      )(
        pageInfo,
        sortAndFilterOptions?.sortOption!,
        sortAndFilterOptions?.titleSearchKeyword,
        sortAndFilterOptions?.locationSearchKeyword,
        sortAndFilterOptions?.jobTypeKeyword,
        sortAndFilterOptions?.workModeKeyword,
        sortAndFilterOptions?.datePostedRange
      )) as FilterJobsResp;
      setJobList([...jobList, ...resp.data]);
      setPageInfo(resp?.meta?.nextPageUrl);
      setTotalJobs(resp?.meta?.total);
    }
  };

  return (
    <>
      <Seo pageTitle="Recommended Jobs" />

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

      {/* End Login Popup Modal */}

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

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

      <Breadcrumb title="Recommended Jobs" meta="Jobs" />
      {/* <!--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
                  sortAndFilterOptions={sortAndFilterOptions}
                  setSortAndFilterOptions={setSortAndFilterOptions}
                  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
                sortAndFilterOptions={sortAndFilterOptions}
                setSortAndFilterOptions={setSortAndFilterOptions}
                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={jobList}
                  handleClearAll={handleClearAll}
                  handleDateRangeChange={handleDateRangeChange}
                  handleSortChange={handleSortChange}
                  clearAllStateDisabled={clearAllStateDisabled}
                  pageInfo={pageInfo}
                  recommendedJobsFunc={recommendedJobsFunc}
                  sortAndFilterOptions={sortAndFilterOptions}
                  totalJobs={totalJobs}
                />
                {/* <!-- 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;