import Link from "next/link";
import React, { FC } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import { Oval } from "react-loader-spinner";

interface FilterCandidatesBoxProps {
  candidateList: CandidateProfileDetails[] | undefined;
  handleSortChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
  handleClearAll: () => void;
  clearAllStateDisabled: boolean;
  pageInfo: string | null;
  fetchCandidatesFunc: (arg0?: boolean) => void;
  sortAndFilterOptions: SortAndFilterOptionsType;
}

const FilterCandidateBox: FC<FilterCandidatesBoxProps> = ({
  candidateList,
  handleClearAll,
  handleSortChange,
  clearAllStateDisabled,
  pageInfo,
  fetchCandidatesFunc,
  sortAndFilterOptions,
}) => {
  let content = candidateList!?.map((candidate: CandidateProfileDetails) => (
    <div className="candidate-block-three" key={candidate.id}>
      <div className="inner-box">
        <div className="content">
          <figure className="image">
            <img
              src={
                candidate.profilePictureUrl || "/images/human_capital_logo.png"
              }
              alt="candidates"
              onError={(e) => {
                e.currentTarget.src = "/images/human_capital_logo.png";
                e.currentTarget.onerror = null;
              }}
            />
          </figure>
          <h4 className="name">
            <Link href={`/candidate/${candidate.id}`}>
              {`${candidate.firstName} ${candidate.lastName}`}
            </Link>
          </h4>

          <ul className="candidate-info">
            <li className="designation">{candidate.pronouns}</li>
            <li>
              <span className="icon flaticon-map-locator"></span>{" "}
              {candidate.address}
            </li>
            {/* <li>
                  <span className="icon flaticon-money"></span> $
                  {candidate.state}
              </li> */}
          </ul>
          {/* End candidate-info */}

          <ul className="post-tags">
            {candidate.skills?.slice(0, 5).map((skill, i) => (
              <li key={i} className="my-1">
                <a href="#">{skill.name}</a>
              </li>
            ))}
          </ul>
        </div>
        {/* End content */}

        <div className="btn-box">
          {/* End bookmark-btn */}

          <Link
            href={`/candidate/${candidate.id}`}
            className="theme-btn btn-style-three"
          >
            <span className="btn-title">View Profile</span>
          </Link>
        </div>
        {/* End btn-box */}
      </div>
    </div>
    // End all jobs
  ));

  return (
    <>
      <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>{content?.length}</strong> Candidates
          </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={handleSortChange}
            value={sortAndFilterOptions.sortOption}
          >
            <option value="">Sort by (default)</option>
            <option value="desc">Newest</option>
            <option value="asc">Oldest</option>
          </select>
          {/* End select */}
        </div>
      </div>
      {/* End top filter bar box */}
      <InfiniteScroll
        dataLength={candidateList!.length}
        next={fetchCandidatesFunc}
        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>
              {candidateList?.length == 0
                ? "No candidates to load"
                : "Yay! You have seen it all"}
            </b>
          </p>
        }
      >
        <div className="cv-search-enhanced-cards">{content}</div>
      </InfiniteScroll>
    </>
  );
};

export default FilterCandidateBox;