import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import React, { FC, useContext, useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import { Oval } from "react-loader-spinner";
import { useFormatDate } from "../../hooks/useFormatDate";
import UseFullScreenLoader from "../../hooks/UseFullScreenLoader";
import { useDeleteSavedJob } from "../../utils/hooks/useDeleteSavedJob";
import { useSavedJob } from "../../utils/hooks/useSavedJob";
import { AuthContext } from "../../contexts/auth";
import { AuthContextType } from "../..";

interface FilterJobsBoxProps {
  jobList: Job[] | undefined;
  handleSortChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
  handleDateRangeChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
  handleClearAll: () => void;
  clearAllStateDisabled: boolean;
  pageInfo: string | null;
  recommendedJobsFunc: (arg0?: boolean) => void;
  sortAndFilterOptions: SortAndFilterOptionsType;
  totalJobs?: number;
}

const FilterJobsBox: FC<FilterJobsBoxProps> = ({
  jobList,
  handleClearAll,
  handleDateRangeChange,
  handleSortChange,
  clearAllStateDisabled,
  pageInfo,
  recommendedJobsFunc,
  sortAndFilterOptions,
  totalJobs,
}) => {
  const currentPath = usePathname();
  const router = useRouter();
  const [getIsLoading, setIsLoading] = useState<boolean>();
  const { isAuthenticated } = useContext(AuthContext) as AuthContextType;
  const handleSaveJob = async (job: Job) => {
    try {
      setIsLoading(true);
      const resp = (await useSavedJob(job.id!)) as Response;
      if (resp.status === 202) {
        (await useDeleteSavedJob(job.id!)) as Response;
      }
      job.isSaved = !job.isSaved;
      // handleClearAll();
      pageInfo && recommendedJobsFunc(true);
    } catch (error) {
      console.error("Error fetching API (Saved Jobs):", error);
    } finally {
      setIsLoading(false);
    }
  };

  let content = jobList?.map((item: Job) => (
    <div 
      className="job-block" 
      key={item.id}
      onClick={() => router.push(`/jobs/${item.id}`)}
      style={{ cursor: "pointer" }}
    >
      <div className="inner-box">
        <div className="content">
          <span className="company-logo">
            <img
              alt={item.company?.name}
              className="thumb"
              src={
                item.cmpanyLogoUrl
                  ? item.cmpanyLogoUrl
                  : "/images/human_capital_logo.png"
              }
              width={50}
              height={50}
              onError={(e: any) => {
                e.target.src = "/images/human_capital_logo.png";
                e.target.onerror = null;
              }}
            />
          </span>
          <h4>
            <Link href={`/jobs/${item.id}`} onClick={(e) => e.stopPropagation()}>{item.title}</Link>
          </h4>

          <ul className="job-info">
            <li>
              <span className="icon flaticon-briefcase"></span>
              {item.company?.name}
            </li>
            {/* compnay info */}
            <li>
              <span className="icon flaticon-map-locator"></span>
              {item?.location}
            </li>
            {/* location info */}
            <li>
              <span className="icon flaticon-clock-3"></span>{" "}
              {useFormatDate(item.openingDate as string)}
            </li>
            {/* time info */}
            <li>
              <span className="icon flaticon-money"></span> {item?.salary}
            </li>
            {/* salary info */}
          </ul>
          {/* End .job-info */}

          <ul className="job-other-info">
            {/* {item?.jobType?.map((val, i) => (
                            <li key={i} className={`${val.styleClass}`}>
                                {val.type}
                            </li>
                        ))} */}
          </ul>
          {/* End .job-other-info */}

          {isAuthenticated && (
            <button
              onClick={(e) => {
                e.stopPropagation();
                handleSaveJob(item);
              }}
              className="bookmark-btn"
            >
              {item.isSaved ? (
                <svg
                  width="25px"
                  height="25px"
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g id="SVGRepo_bgCarrier" strokeWidth="0" />
                  <g
                    id="SVGRepo_tracerCarrier"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                  <g id="SVGRepo_iconCarrier">
                    <path
                      d="M15.75 3.25H8.24999C7.52064 3.25 6.82117 3.53973 6.30545 4.05546C5.78972 4.57118 5.49999 5.27065 5.49999 6V20C5.49898 20.1377 5.53587 20.2729 5.60662 20.391C5.67738 20.5091 5.77926 20.6054 5.90112 20.6695C6.02298 20.7335 6.16012 20.7627 6.2975 20.754C6.43488 20.7453 6.56721 20.6989 6.67999 20.62L12 16.91L17.32 20.62C17.4467 20.7063 17.5967 20.7516 17.75 20.75C17.871 20.7486 17.9903 20.7213 18.1 20.67C18.2203 20.6041 18.3208 20.5072 18.3911 20.3894C18.4615 20.2716 18.499 20.1372 18.5 20V6C18.5 5.27065 18.2103 4.57118 17.6945 4.05546C17.1788 3.53973 16.4793 3.25 15.75 3.25Z"
                      fill="#3fe0d0"
                    />
                  </g>
                </svg>
              ) : (
                <span className="flaticon-bookmark"></span>
              )}
            </button>
          )}
        </div>
      </div>
    </div>
    // End all jobs
  ));
  let companyContent = jobList?.map((item: any) => (
    <div 
      className="job-block" 
      key={item.id}
      onClick={() => router.push(`/company/${item.id}`)}
      style={{ cursor: "pointer" }}
    >
      <div className="inner-box">
        <div className="content">
          <span className="company-logo">
            <img src={"/images/human_capital_logo.png"} alt="item brand" />
          </span>
          <h4>
            <Link href={`/company/${item.id}`} onClick={(e) => e.stopPropagation()}>
              <span className="icon flaticon-briefcase pe-1"></span>
              {item?.name}
            </Link>
            {/* <Link href={`/jobs/${item.id}`}>{item.title}</Link> */}
          </h4>

          <ul className="job-info">
            {/* compnay info */}
            <li>
              <span className="icon flaticon-map-locator"></span>
              {item?.location}
            </li>
            {/* location info */}
            <li>
              <span className="icon flaticon-clock-3"></span>{" "}
              {new Date(item.createdAt).toLocaleString()}
            </li>
          </ul>

          {/* <button className="bookmark-btn">
            <span className="flaticon-bookmark"></span>
          </button> */}
        </div>
      </div>
    </div>
    // End all jobs
  ));

  return (
    <>
      {getIsLoading && <UseFullScreenLoader text="Please Hang On..." />}
      <div className="ls-switcher">
        <div className="show-result">
          <div className="show-1023">
            <button
              type="button"
              className="theme-btn toggle-filters "
              data-bs-toggle="offcanvas"
              data-bs-target="#filter-sidebar"
            >
              <span className="icon icon-filter"></span> Filter
            </button>
          </div>
          {/* Collapsible sidebar button */}

          <div className="text">
            Showing <strong>{jobList?.length}</strong>{" "}
            {totalJobs ? `of ${totalJobs} ` : ""}
            {currentPath === "/jobs" ? "jobs" : "companies"}
          </div>
        </div>
        {/* End show-result */}

        <div className="sort-by">
          <button
            disabled={clearAllStateDisabled}
            onClick={handleClearAll}
            className={`btn btn-danger text-nowrap me-2`}
            style={{ minHeight: "45px", marginBottom: "15px" }}
          >
            Clear All
          </button>

          <select
            className="chosen-single form-select"
            onChange={handleDateRangeChange}
            value={sortAndFilterOptions.datePostedRange}
          >
            <option value="">Date Posted</option>
            <option value="any_time">Any Time</option>
            <option value="last_30_days">Past Month</option>
            <option value="last_7_days">Past Week</option>
            <option value="last_24_hours">Past 24 Hours</option>
          </select>
          {/* End select */}

          <select
            className="chosen-single form-select"
            onChange={handleSortChange}
            value={sortAndFilterOptions.sortOption}
          >
            <option value="">Sort By</option>
            <option value="desc">Newest</option>
            <option value="asc">Oldest</option>
          </select>
          {/* End select */}
        </div>
      </div>
      {/* End top filter bar box */}

      {currentPath === "/jobs" && (
        <InfiniteScroll
          dataLength={jobList!.length}
          next={recommendedJobsFunc}
          hasMore={pageInfo !== null}
          loader={
            <div className="d-flex justify-content-center py-4">
              <Oval
                visible={true}
                height="40"
                width="40"
                color="#055875"
                secondaryColor="#055875c2"
                ariaLabel="oval-loading"
              />
            </div>
          }
          endMessage={
            <p style={{ textAlign: "center" }}>
              <b>Yay! You have seen it all</b>
            </p>
          }
        >
          {content}
        </InfiniteScroll>
      )}

      {currentPath !== "/jobs" && (
        <InfiniteScroll
          dataLength={jobList!.length}
          next={recommendedJobsFunc}
          hasMore={pageInfo !== null}
          loader={
            <div className="d-flex justify-content-center py-4">
              <Oval
                visible={true}
                height="40"
                width="40"
                color="#055875"
                secondaryColor="#055875c2"
                ariaLabel="oval-loading"
              />
            </div>
          }
          endMessage={
            <p style={{ textAlign: "center" }}>
              <b>Yay! You have seen it all</b>
            </p>
          }
        >
          {companyContent}
        </InfiniteScroll>
      )}
    </>
  );
};

export default FilterJobsBox;