import {
  NavLink,
  Outlet,
  useLocation
} from "react-router-dom";

import "./PublicPortalLayout.css";

/* =========================================================
   PUBLIC PAGE INFORMATION
   ========================================================= */

const getPublicPageInformation = (
  pathname
) => {
  if (
    pathname.startsWith(
      "/staff/form/personal-details"
    )
  ) {
    return {
      eyebrow:
        "Staff Record Form",

      title:
        "Personal Details"
    };
  }

  if (
    pathname.startsWith(
      "/staff/form/employment-details"
    )
  ) {
    return {
      eyebrow:
        "Staff Record Form",

      title:
        "Employment Details"
    };
  }

  if (
    pathname.startsWith(
      "/staff/form/next-of-kin"
    )
  ) {
    return {
      eyebrow:
        "Staff Record Form",

      title:
        "Next of Kin"
    };
  }

  if (
    pathname.startsWith(
      "/staff/form/dependents"
    )
  ) {
    return {
      eyebrow:
        "Staff Record Form",

      title:
        "Dependents"
    };
  }

  if (
    pathname.startsWith(
      "/staff/form/qualifications"
    )
  ) {
    return {
      eyebrow:
        "Staff Record Form",

      title:
        "Qualifications"
    };
  }

  if (
    pathname.startsWith(
      "/staff/form/emergency-contact"
    )
  ) {
    return {
      eyebrow:
        "Staff Record Form",

      title:
        "Emergency Contact"
    };
  }

  if (
    pathname.startsWith(
      "/staff/form/documents"
    )
  ) {
    return {
      eyebrow:
        "Staff Record Form",

      title:
        "Supporting Documents"
    };
  }

  if (
    pathname.startsWith(
      "/staff/form/declaration"
    )
  ) {
    return {
      eyebrow:
        "Staff Record Form",

      title:
        "Review and Declaration"
    };
  }

  if (
    pathname.startsWith(
      "/staff/welcome"
    )
  ) {
    return {
      eyebrow:
        "Human Resource Portal",

      title:
        "Welcome"
    };
  }

  if (
    pathname.startsWith(
      "/staff/identify"
    )
  ) {
    return {
      eyebrow:
        "Human Resource Portal",

      title:
        "Staff Identification"
    };
  }

  return {
    eyebrow:
      "Human Resource Portal",

    title:
      "Staff Records Verification"
  };
};

/* =========================================================
   PUBLIC NAVIGATION ITEMS
   ========================================================= */

const publicNavigationItems = [
  {
    path:
      "/staff/access",

    shortLabel:
      "GC",

    label:
      "Ghana Card Verification"
  },

  {
    path:
      "/staff/identify",

    shortLabel:
      "SI",

    label:
      "Staff Identification"
  },

  {
    path:
      "/staff/welcome",

    shortLabel:
      "WP",

    label:
      "Welcome Page"
  }
];

/* =========================================================
   COMPONENT
   ========================================================= */

const PublicPortalLayout = () => {
  const location =
    useLocation();

  const isFormPage =
    location.pathname.startsWith(
      "/staff/form"
    );

  const pageInformation =
    getPublicPageInformation(
      location.pathname
    );

  return (
    <div className="public-portal-layout">
      {/* =====================================================
          TOP NAVBAR
          ===================================================== */}

      <header className="public-portal-header">
        {/* Left brand area */}

        <div className="public-portal-header__brand">
          <NavLink
            to="/staff/access"
            className="public-portal-brand"
          >
            <span className="public-portal-brand__mark">
              C
            </span>

            <span className="public-portal-brand__details">
              <strong>
                CAGD SRMS
              </strong>

              <small>
                Staff Records Management System
              </small>
            </span>
          </NavLink>
        </div>

        {/* Right navbar area */}

        <div className="public-portal-header__toolbar">
          <div className="public-portal-page-title">
            <span>
              {pageInformation.eyebrow}
            </span>

            <strong>
              {pageInformation.title}
            </strong>
          </div>

          <div className="public-portal-header__badge">
            Staff Records Update Portal
          </div>
        </div>
      </header>

      {/* =====================================================
          MAIN PUBLIC WORKSPACE
          ===================================================== */}

      <main
        className={[
          "public-portal-main",

          isFormPage
            ? "public-portal-main--form"
            : "public-portal-main--standard"
        ]
          .filter(Boolean)
          .join(" ")}
      >
        {/* ===================================================
            STANDARD PUBLIC SIDEBAR

            StaffFormLayout provides its own progress sidebar
            on the staff form routes.
            =================================================== */}

        {!isFormPage && (
          <aside className="public-portal-sidebar">
            <div className="public-portal-sidebar__heading">
              <span>
                Staff Portal
              </span>

              <strong>
                Verification Process
              </strong>
            </div>

            <nav
              className="public-portal-navigation"
              aria-label="Staff portal navigation"
            >
              {publicNavigationItems.map(
                (
                  item,
                  index
                ) => {
                  const isActive =
                    location.pathname ===
                    item.path;

                  const currentRouteIndex =
                    publicNavigationItems
                      .findIndex(
                        (
                          navigationItem
                        ) =>
                          location.pathname ===
                          navigationItem.path
                      );

                  const isCompleted =
                    currentRouteIndex > index;

                  return (
                    <NavLink
                      key={
                        item.path
                      }
                      to={
                        item.path
                      }
                      className={[
                        "public-portal-navigation__item",

                        isActive
                          ? "public-portal-navigation__item--active"
                          : "",

                        isCompleted
                          ? "public-portal-navigation__item--completed"
                          : ""
                      ]
                        .filter(
                          Boolean
                        )
                        .join(" ")}
                    >
                      <span className="public-portal-navigation__icon">
                        {isCompleted
                          ? "✓"
                          : item.shortLabel}
                      </span>

                      <span className="public-portal-navigation__text">
                        <small>
                          Step {index + 1}
                        </small>

                        <strong>
                          {item.label}
                        </strong>
                      </span>
                    </NavLink>
                  );
                }
              )}
            </nav>

            <div className="public-portal-sidebar__notice">
              <strong>
                Secure Staff Portal
              </strong>

              <p>
                Complete the verification process
                before accessing the staff records
                update form.
              </p>
            </div>
          </aside>
        )}

        {/* ===================================================
            ROUTED PUBLIC CONTENT
            =================================================== */}

        <section className="public-portal-content">
          <Outlet />
        </section>
      </main>

      {/* =====================================================
          FOOTER
          ===================================================== */}

      <footer className="public-portal-footer">
        <div className="public-portal-footer__inner">
          <strong>
            Controller and
            Accountant-General&apos;s Department
          </strong>

          <span>
            Human Resource Directorate
          </span>

          <small>
            Staff information is handled securely
            and used only for authorised Human
            Resource purposes.
          </small>
        </div>
      </footer>
    </div>
  );
};

export default PublicPortalLayout;