import {
  useEffect,
  useState
} from "react";

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

import {
  getFormProgress
} from "../../services/publicPortalService";

const StaffFormLayout = () => {
  const navigate =
    useNavigate();

  const location =
    useLocation();

  const [progress, setProgress] =
    useState(null);

  const [loading, setLoading] =
    useState(true);

  const [error, setError] =
    useState("");

  const loadProgress = async () => {
    try {
      setError("");

      const result =
        await getFormProgress();

      setProgress(
        result.data
      );
    } catch (requestError) {
      setError(
        requestError.response?.data
          ?.message ||
          requestError.message ||
          "Unable to load form progress."
      );
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    const token =
      sessionStorage.getItem(
        "staffSubmissionToken"
      );

    if (!token) {
      navigate(
        "/staff/identify",
        {
          replace: true
        }
      );

      return;
    }

    loadProgress();
  }, [
    location.pathname,
    navigate
  ]);

  return (
    <section className="staff-form-shell">
      <aside className="staff-form-sidebar">
        <div className="form-progress-heading">
          <span>
            Staff Records Update
          </span>

          <strong>
            {progress
              ? `${progress.percentage}% complete`
              : "Loading progress"}
          </strong>
        </div>

        <div className="progress-track">
          <div
            className="progress-track__bar"
            style={{
              width:
                `${progress?.percentage || 0}%`
            }}
          />
        </div>

        {loading ? (
          <div className="sidebar-message">
            Loading sections...
          </div>
        ) : error ? (
          <div className="sidebar-message sidebar-message--error">
            {error}
          </div>
        ) : (
          <nav className="form-section-navigation">
            {progress?.sections.map(
              (section) => (
                <div
                  className={[
                    "form-section-item",
                    section.status ===
                      "completed"
                      ? "form-section-item--completed"
                      : "",
                    section.status ===
                      "in_progress"
                      ? "form-section-item--active"
                      : ""
                  ]
                    .filter(Boolean)
                    .join(" ")}
                  key={
                    section.section_key
                  }
                >
                  <span className="form-section-item__number">
                    {
                      section.section_order
                    }
                  </span>

                  <div>
                    <strong>
                      {
                        section.section_name
                      }
                    </strong>

                    <small>
                      {
                        section.status
                          .replaceAll(
                            "_",
                            " "
                          )
                      }
                    </small>
                  </div>
                </div>
              )
            )}
          </nav>
        )}
      </aside>

      <main className="staff-form-content">
        <Outlet
          context={{
            refreshProgress:
              loadProgress,

            progress
          }}
        />
      </main>
    </section>
  );
};

export default StaffFormLayout;