import { Dispatch, SetStateAction, useEffect, useState } from "react";
import { useGetPostedJobs } from "../../../../utils/hooks/useGetPostedJobs";
import InfiniteScroll from "react-infinite-scroll-component";
import { Oval } from "react-loader-spinner";

const WidgetTopFilterBox = ({
  setJobId,
  setSortOption,
  sortOption,
  setJobTitle,
  jobTitle,
  setPageInfoTabs,
}: {
  setJobId: Dispatch<SetStateAction<number>>;
  setSortOption: Dispatch<SetStateAction<string>>;
  sortOption: string;
  setJobTitle: Dispatch<SetStateAction<string>>;
  jobTitle: string;
  setPageInfoTabs: Dispatch<SetStateAction<string | null>>;
}) => {
  const [getPostedJobs, setPostedJobs] = useState<Job[]>([]);
  const [pageInfo, setPageInfo] = useState<string | null>("/?page=1");
  const FetchPostedJobs = async () => {
    try {
      const { resp, status, meta } = (await useGetPostedJobs(
        pageInfo,
        sortOption
      )) as PostedJobsResp;
      //   console.log("resp>>>",resp)
      setPostedJobs([...getPostedJobs, ...resp]);
      setPageInfo(meta?.nextPageUrl);
    } catch (error) {
      console.error("Error fetching POST API (Job Post):", error);
    }
  };
  const handleClick = (e: React.MouseEvent<HTMLLIElement>) => {
    const jobId = e.currentTarget.getAttribute("data-jobid");
    const title = e.currentTarget.getAttribute("data-title");
    setJobTitle(title!);
    setJobId(Number(jobId));
  };
  useEffect(() => {
    FetchPostedJobs();
  }, []);

  return (
    <div className="chosen-outer">
      <div className="dropdown">
        <button
          className="btn btn-secondary dropdown-toggle dropdown-toggle-applicant px-2"
          type="button"
          id="dropdownMenuButton1"
          data-bs-toggle="dropdown"
          aria-expanded="false"
        >
          {jobTitle}
        </button>
        <ul
          id="scrollable_div"
          className="dropdown-menu dropdown-menu-applicants"
          aria-labelledby="dropdownMenuButton1"
        >
          <li
            className="px-2 py-1"
            role="button"
            data-jobid={0}
            data-title="All Jobs"
            onClick={handleClick}
          >
            All Jobs
          </li>
          <InfiniteScroll
            dataLength={getPostedJobs!.length}
            next={FetchPostedJobs}
            hasMore={pageInfo != null}
            scrollableTarget="scrollable_div"
            loader={
              <div className="d-flex justify-content-center py-3">
                <Oval
                  visible={true}
                  height="40"
                  width="40"
                  color="#055875"
                  secondaryColor="#055875c2"
                  ariaLabel="oval-loading"
                />
              </div>
            }
          >
            {getPostedJobs.map((job) => (
              <li
                className="px-2 py-1"
                role="button"
                key={job.id}
                data-jobid={job.id!}
                data-title={job.title}
                onClick={handleClick}
              >
                {job.title}
              </li>
            ))}
          </InfiniteScroll>
        </ul>
      </div>
      {/* <!--Tabs Box--> */}

      <select
        onChange={(e) => {
          setSortOption(e.target.value);
          setPageInfoTabs("/?page=1");
        }}
        className="chosen-single form-select chosen-container"
        value={sortOption}
      >
        <option value={"desc"}>Newest</option>
        <option value={"asc"}>Oldest</option>
      </select>
      {/* <!--Tabs Box--> */}
    </div>
  );
};

export default WidgetTopFilterBox;