import { GetStaticProps } from "next";
import { MDXRemote } from "next-mdx-remote";
import React from "react";

import { ConnectWithUs } from "@/components/ConnectWithUs";
import { DefaultLayout } from "@/components/DefaultLayout";
import { EmailSignup } from "@/components/EmailSignup";
import { EventDescriptionCard } from "@/components/EventDescriptionCard";
import { Image } from "@/components/Image";
import { Link } from "@/components/Link";
import { NewsCard } from "@/components/NewsCard";
import { SocialLinks } from "@/components/SocialLinks";
import { Event, getUpcomingEvents } from "@/lib/events";
import { News, getRecentNews } from "@/lib/news";

import styles from "./index.module.css";

interface Props {
  numberOfEvents: number; // total number of upcoming events
  events: Event[]; // array of 0 - 2 events
  news: News;
}

export default function Home(props: Props) {
  return (
    <>
      <DefaultLayout>
        <header className={styles.intro}>
          <div className={styles.introTop} />
          <div className={styles.introContent}>
            <div className={styles.clubTitleWrapper}>
              <Image src="/images/logo-icon.svg" alt="CSC Logo" />
              <h1 className={styles.clubTitle}>Computer Science Club</h1>
            </div>
            <p className={styles.clubDescription}>
              University of Waterloo&apos;s <br />
              student computing community
            </p>
            <SocialLinks color="gradient" size="big" />
          </div>
          <div className={styles.introBottom} />
          <Image
            className={styles.codey}
            src="/images/home/codey_sitting.svg"
            alt="CSC mascot Codey, a blue shiba with circular glasses"
          />
        </header>
      </DefaultLayout>
      <div className={styles.cardsBackground}>
        <div className={styles.cards}>
          <section className={styles.events}>
            <h1 className={styles.cardsHeading}>Upcoming Events</h1>
            <p className={styles.cardsDescription}>
              See past events{" "}
              <Link href="/events/archive">
                <a title="Events Archive">here</a>
              </Link>
            </p>
            <hr className={styles.cardsDividingLine} />
            {props.numberOfEvents == 0 ? (
              <p>
                There are no upcoming events right now. Please check back later!
              </p>
            ) : null}
            <div className={styles.eventCards}>
              {props.events.length > 0
                ? props.events.map((event) => (
                    <EventDescriptionCard
                      {...event.metadata}
                      date={new Date(event.metadata.date)}
                      key={event.metadata.name + event.metadata.date.toString()}
                    />
                  ))
                : null}
            </div>
            {props.numberOfEvents > 2 ? (
              <p>
                See more upcoming events{" "}
                <Link href="/events">
                  <a title="Events">here</a>
                </Link>
              </p>
            ) : null}
          </section>
          <section className={styles.news}>
            <h1 className={styles.cardsHeading}>News</h1>
            <p className={styles.cardsDescription}>
              Updates from our execs! <br />
              See past news{" "}
              <Link href="/news/archive">
                <a title="News Archive">here</a>
              </Link>
            </p>
            <hr className={styles.cardsDividingLine} />
            {
              <NewsCard
                {...props.news.metadata}
                date={new Date(props.news.metadata.date)}
              >
                <MDXRemote {...props.news.content} />
              </NewsCard>
            }
          </section>
        </div>
      </div>
      <DefaultLayout>
        <ConnectWithUs />
        <EmailSignup />
      </DefaultLayout>
    </>
  );
}

Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
  return <div className={styles.page}>{props.children}</div>;
};

export const getStaticProps: GetStaticProps<Props> = async () => {
  const upcomingEvents = await getUpcomingEvents();
  const recentNews = await getRecentNews();
  return {
    props: {
      numberOfEvents: upcomingEvents.length,
      events: upcomingEvents.slice(0, 2),
      news: recentNews[0],
    },
  };
};