import Link from "next/link";
import jsonpath from "jsonpath";
import _ from "lodash";
import { useRouter } from "next/router";

const Breadcrumbs = (props) => {
  const {
    courseContent,
    slug,
    activitysub,
    activity,
    applicant_id,
    course_id,
    applicant_ref,
  } = props;
  const router = useRouter();
  const { course, section } = router.query;

  function Breadcrumb() {
    if (slug) {
      var coursePageURL = course + "/" + slug;
      if (_.isEmpty(courseContent)) {
        return null;
      } else {
        var sectionObj = jsonpath.query(
          courseContent,
          '$..sections[?(@.path=="/' + coursePageURL + '")]'
        );
        var breadcrumb = sectionObj[0].chapter.title; //sectionObj[0].chapter
        return (
          <li className="govuk-breadcrumbs__list-item" aria-current="page">
            {breadcrumb}
          </li>
        );
      }
    } else {
      return null;
    }
  }

  return (
    <nav
      aria-label={"Breadcrumb for " + _.startCase(_.toLower(course))}
      role="navigation"
      data-module="track-click"
    >
      <div className="govuk-breadcrumbs ">
        <ol className="govuk-breadcrumbs__list">
          <li className="govuk-breadcrumbs__list-item">
            <Link href="http://www.gov.uk">
              <a className="govuk-breadcrumbs__link">GOV.UK</a>
            </Link>
          </li>
          <li className="govuk-breadcrumbs__list-item">
            <Link href="/">
              <a className="govuk-breadcrumbs__link">
                Understand the Prevent Duty
              </a>
            </Link>
          </li>
          <li className="govuk-breadcrumbs__list-item">
            <Link href="/portal">
              <a className="govuk-breadcrumbs__link">Find the right training</a>
            </Link>
          </li>
          {!_.isEmpty(course) ? (
            <li className="govuk-breadcrumbs__list-item">
              <Link
                href={
                  "/" +
                  course +
                  "?id=" +
                  applicant_id +
                  "&refno=" +
                  applicant_ref +
                  "&courseid=" +
                  course_id
                }
              >
                <a className="govuk-breadcrumbs__link">
                  {_.startCase(_.toLower(course))}
                </a>
              </Link>
            </li>
          ) : (
            ""
          )}

          <Breadcrumb />
        </ol>
      </div>
    </nav>
  );
};
export default Breadcrumbs;