import LoginPopup from "../../components/common/form/login/LoginPopup";
import BreadCrumb from "../../components/dashboard/common/BreadCrumb";
import CopyrightFooter from "../../components/dashboard/common/CopyrightFooter";
import MobileMenu from "../../components/header/MobileMenu";
import Seo from "../../components/common/Seo";
import DashboardHeader from "../../components/header/DashboardHeader";
import WidgetTopFilterBox from "../../components/dashboard/company-dashboard/all-applicants/WidgetTopFilterBox";
import WidgetContentBox from "../../components/dashboard/company-dashboard/all-applicants/WidgetContentBox";
import { useState } from "react";
import DashboardSidebar from "../../components/header/DashboardSidebar";
import Footer from "../../components/footer/Footer";

const index = () => {
  const [getIsSidebarOpen, setIsSidebarOpen] = useState(false);
  const [jobId, setJobId] = useState<number>(0);
  const [jobTitle, setJobTitle] = useState<string>("All Jobs");
  const [sortOption, setSortOption] = useState("desc");
  const [pageInfoTabs, setPageInfoTabs] = useState<string | null>("/?page=1");
  return (
    <>
      <Seo pageTitle="All applicants" />
      <div className="page-wrapper dashboard">
        <span className="header-span"></span>
        {/* <!-- Header Span for hight --> */}

        {/* End Login Popup Modal */}

        <DashboardHeader
          logo={"/images/human_capital_fav.png"}
          ac_holder={"Jobrator"}
        />
        {/* End Header */}

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

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

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

            <div className="row">
              <div className="col-lg-12">
                {/* <!-- Ls widget --> */}
                <div className="ls-widget">
                  <div className="tabs-box">
                    <div className="widget-title">
                      <h4>Applicant</h4>
                      <WidgetTopFilterBox
                        setJobId={setJobId}
                        setSortOption={setSortOption}
                        sortOption={sortOption}
                        setJobTitle={setJobTitle}
                        jobTitle={jobTitle}
                        setPageInfoTabs={setPageInfoTabs}
                      />
                    </div>
                    {/* End top widget filter bar */}

                    <WidgetContentBox
                      jobId={jobId}
                      sortOption={sortOption}
                      jobTitle={jobTitle}
                      setPageInfo={setPageInfoTabs}
                      pageInfo={pageInfoTabs}
                    />
                    {/* End widget-content */}
                  </div>
                </div>
              </div>
            </div>
            {/* End .row */}
          </div>
          {/* End dashboard-outer */}
        </section>
        {/* <!-- End Dashboard --> */}

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

export default index;