/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import { withIronSessionSsr } from "iron-session/next";
import { sessionOptions } from "@/lib/session";
import useUser from "@/hooks/useUser";
import PaymentDue from "./(status)/PaymentDue";
import { useRouter } from "next/router";

export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
  const user = req.session.user;

  const envVariables: { [key: string]: string } = {};
  Object.keys(process.env)
    .filter((x) => x.startsWith("NEXT_PUBLIC"))
    .forEach((x: string) => {
      envVariables[x] = process.env[x]!;
    });

  if (!user || !user.isVerified) {
    res.setHeader("location", "/login");
    res.statusCode = 302;
    res.end();
    return {
      props: {
        user: null,
        envVariables,
      },
    };
  }

  return {
    props: { user: req.session.user, envVariables },
  };
}, sessionOptions);

export default function Home({
  envVariables,
}: {
  envVariables: { [key: string]: string };
}) {
  const { user } = useUser({ redirectTo: "/login" });
  const router = useRouter();

  return (
    <>
      <Head>
        <title>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>
      {user && (
        <PaymentDue
          key={envVariables["NEXT_PUBLIC_PAYPAL_CLIENT_ID"]}
          clientID={envVariables["NEXT_PUBLIC_PAYPAL_CLIENT_ID"] || ""}
          user={user}
          reload={router.reload}
        />
      )}
    </>
  );
}
