import { Suspense, useEffect, useState } from "react";
import Seo from "../../components/common/Seo";
import LoginPopup from "../../components/common/form/login/LoginPopup";
import JobListingsTable from "../../components/dashboard/candidate-dashboard/applied-jobs/AppliedjobsTable";
import BreadCrumb from "../../components/dashboard/common/BreadCrumb";
import CopyrightFooter from "../../components/dashboard/common/CopyrightFooter";
import DashboardHeader from "../../components/header/DashboardHeader";
import DashboardSidebar from "../../components/header/DashboardSidebar";
import MobileMenu from "../../components/header/MobileMenu";
import { useGetAppliedJobs } from "../../utils/hooks";
import { Job } from "../..";
import SavedJobs from "./saved-jobs";
import Footer from "../../components/footer/Footer";

interface ApplyJobRep {
  data: Job[];
  meta: Meta;
}

const AppliedJobs = () => {
  const [getIsSidebarOpen, setIsSidebarOpen] = useState(false);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [sortOrder, setSortOrder] = useState<string>("desc");
  const [appliedJobs, setAppliedJobs] = useState<Job[]>([]);
  const [pageInfo, setPageInfo] = useState<string | null>("/?page=1");

  useEffect(() => {
    getAppliedJobs();
  }, []);

  useEffect(() => {
    setPageInfo("/?page=1");
    setAppliedJobs([]);
  }, [sortOrder]);
  useEffect(() => {
    getAppliedJobs();
  }, [pageInfo]);

  const getAppliedJobs = async () => {
    try {
      pageInfo == "/page=1" && setIsLoading(true);
      const appliedJobsResp = (await useGetAppliedJobs(
        sortOrder,
        pageInfo
      )) as ApplyJobRep;
      setPageInfo(appliedJobsResp.meta.nextPageUrl);
      setAppliedJobs([...appliedJobs, ...appliedJobsResp.data]);
    } catch (e) {
      console.log("Error in get Applied Jobs", e);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <>
      <Seo pageTitle="Applied Jobs" />
      <div className="page-wrapper dashboard">
        <span className="header-span"></span>
        {/* <!-- Header Span for hight --> */}

        {/* End Login Popup Modal */}

        <DashboardHeader
          logo={"/images/human_capital_logo.png"}
          ac_holder={"My Account"}
        />
        {/* End Header */}

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

        <DashboardSidebar
          getIsSidebarOpen={getIsSidebarOpen}
          setIsSidebarOpen={setIsSidebarOpen}
        />
        {/* <!-- End Candidates Sidebar Menu --> */}

        {/* <!-- Dashboard --> */}
        <section className="user-dashboard">
          <div className="dashboard-outer">
            <BreadCrumb
              title="Applied jobs!"
              getIsSidebarOpen={getIsSidebarOpen}
              setIsSidebarOpen={setIsSidebarOpen}
            />
            {/* breadCrumb */}

            <div className="row">
              <div className="col-lg-12">
                {/* <!-- Ls widget --> */}
                <div className="ls-widget">
                  <JobListingsTable
                    jobs={appliedJobs!}
                    loading={isLoading}
                    sortOrder={sortOrder}
                    setSortOrder={setSortOrder}
                    setPageInfo={setPageInfo}
                    pageInfo={pageInfo}
                    getAppliedJobs={getAppliedJobs}
                  />
                </div>
              </div>
            </div>
            {/* End .row */}
          </div>
          {/* End dashboard-outer */}
        </section>
        {/* <!-- End Dashboard --> */}

        {/* <CopyrightFooter /> */}
        <Footer />
        {/* <!-- End Copyright --> */}
      </div>
    </>
  );
};

export default AppliedJobs;