import { Link } from "react-router-dom";
import { VFLoaderBox } from "component-templates/VFLoader/VFLoader";
import { formatISODate, parseISODateFromTimeHtml } from "helpers/date-helpers";
import { stripHtml } from "helpers/helpers";
import "./JobList.scss";

export function JobList({ jobs, loading, resetFilters, isIframe = false }) {
  if (loading) {
    return <VFLoaderBox />;
  }

  return (
    <div className="vf-content">
      {jobs.map((job) => (
        <JobList.JobListItem key={job.id} job={job} isIframe={isIframe} />
      ))}
      {!jobs.length && (
        <p>
          No matching jobs found;{" "}
          <a href="#" onClick={resetFilters}>
            Reset your filters
          </a>
          .
        </p>
      )}
      <hr className="vf-divider" />

      <p>
        <Link to="/alerts">Create a customised email alert for jobs</Link>
      </p>
    </div>
  );
}

JobList.JobListItem = function JobListItem({ job, isIframe = false }) {
  const strippedText = stripHtml(job.field_jobs_description);
  return (
    <article
      key={job.id}
      className="vf-summary vf-summary--job | jplist-text-area"
    >
      <h3 className="job-title vf-summary__title">
        <Link
          to={{
            pathname: `/position/${job.field_jobs_reference_number}`,
            state: { job },
          }}
          target={isIframe ? "_parent" : "_self"}
          className="vf-summary__link"
        >
          {job.title}
        </Link>
      </h3>

      <p className="vf-summary__meta">
        {job.field_jobs_staff_category}{" "}
        {job.field_jobs_group === "EMBO" ? (
          <>
            at <span className="jplist-duty-station">EMBO</span> in Heidelberg
          </>
        ) : (
          <>at {job.field_jobs_duty_station.replace(/<[^>]+>/g, "")}</>
        )}
      </p>

      <p className="vf-summary__text job-summary multiline-ellipsis">
        {strippedText}
      </p>
      <span className="vf-u-display-none | used-for-search-index">
        {strippedText}
      </span>

      <span className="jplist-job-type | vf-u-display-none">
        {job.field_jobs_type_key}
      </span>
      <p className="vf-summary__date">
        Closes{" "}
        {formatISODate(parseISODateFromTimeHtml(job.field_jobs_expiration))}
      </p>
    </article>
  );
};