/* eslint-disable @next/next/no-img-element */

import { withIronSessionSsr } from "iron-session/next";
import { sessionOptions } from "@/lib/session";
import { shouldRedirectHome } from "@/utils/navigation.disabled";
import ExamPage from "./(exam)/ExamPage";
import Head from "next/head";
import { User } from "@/interfaces/user";
import { filterBy, redirect, serialize } from "@/utils";
import { requestUser } from "@/utils/api";
import { getAssignment } from "@/utils/assignments.be";
import { Assignment } from "@/interfaces/results";
import useExamStore from "@/stores/exam";
import { useEffect } from "react";
import { Exam } from "@/interfaces/exam";
import { getExamsByIds } from "@/utils/exams.be";
import { sortByModule } from "@/utils/moduleUtils";
import { uniqBy } from "lodash";
import { useRouter } from "next/router";
import { getSessionByAssignment } from "@/utils/sessions.be";
import { Session } from "@/hooks/useSessions";
import moment from "moment";

export const getServerSideProps = withIronSessionSsr(
  async ({ req, res, query }) => {
    const user = await requestUser(req, res);
    const destination = Buffer.from(req.url || "/").toString("base64");
    if (!user) return redirect(`/login?destination=${destination}`);

    if (shouldRedirectHome(user)) return redirect("/");

    const { assignment: assignmentID } = query as { assignment?: string };

    if (assignmentID) {
      const assignment = await getAssignment(assignmentID);

      if (!assignment) return redirect("/exam");
      if (
        !["admin", "developer"].includes(user.type) &&
        !assignment.assignees.includes(user.id)
      )
        return redirect("/exercises");
      if (
        filterBy(assignment.results, "user", user.id) ||
        moment(assignment.startDate).isBefore(moment()) ||
        moment(assignment.endDate).isAfter(moment())
      )
        return redirect("/exam");
      const [exams, session] = await Promise.all([
        getExamsByIds(uniqBy(assignment.exams, "id")),
        getSessionByAssignment(assignmentID),
      ]);

      return {
        props: serialize({ user, assignment, exams, session }),
      };
    }

    return {
      props: serialize({ user }),
    };
  },
  sessionOptions
);

interface Props {
  user: User;
  assignment?: Assignment;
  exams?: Exam[];
  session?: Session;
}

export default function Page({ user, assignment, exams = [], session }: Props) {
  const router = useRouter();

  const { assignment: storeAssignment, dispatch } = useExamStore();

  useEffect(() => {
    if (assignment && exams.length > 0 && !storeAssignment && !session) {
      dispatch({
        type: "INIT_EXAM",
        payload: {
          exams: exams.sort(sortByModule),
          modules: exams
            .map((x) => x!)
            .sort(sortByModule)
            .map((x) => x!.module),
          assignment,
        },
      });

      router.replace(router.asPath);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [assignment, exams, session]);

  useEffect(() => {
    if (assignment && exams.length > 0 && !storeAssignment && !!session) {
      dispatch({ type: "SET_SESSION", payload: { session } });

      router.replace(router.asPath);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [assignment, exams, session]);

  return (
    <>
      <Head>
        <title>Exams | EnCoach</title>
        <meta
          name="description"
          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
        />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <ExamPage page="exams" user={user} hideSidebar={!!assignment} />
    </>
  );
}
