import React from "react";
import { Image } from "../components/Image";
import { SocialLinks } from "../components/SocialLinks";
import { EventDescriptionCard } from "../components/EventDescriptionCard";
import { NewsCard } from "../components/NewsCard";
import { ConnectWithUs } from "../components/ConnectWithUs";
import { EmailSignup } from "../components/EmailSignup";
import { DefaultLayout } from "../components/DefaultLayout";
import styles from "./index.module.css";

// temporary event and news imports
import OOTBReact, {
  metadata as OOTBReactEventMetadata,
} from "../content/playground/ootb-react.event.mdx";
import AltTab, {
  metadata as altTabEventMetadata,
} from "../content/playground/alt-tab.event.mdx";
import UnavailableContent, {
  metadata as unavailableMetadata,
} from "../content/playground/unavailable.news.mdx";

export default function Home() {
  const events = [
    { Content: OOTBReact, metadata: OOTBReactEventMetadata },
    { Content: AltTab, metadata: altTabEventMetadata },
  ];

  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}>
          {/* TODO: add links to past events and past news */}
          <section className={styles.events}>
            <h1 className={styles.cardsHeading}>Upcoming Events</h1>
            <p className={styles.cardsDescription}>See past events here</p>
            <hr className={styles.cardsDividingLine} />
            <div className={styles.eventCards}>
              {events.map(({ metadata }) => (
                <EventDescriptionCard
                  {...metadata}
                  key={metadata.name + metadata.date.toString()}
                />
              ))}
            </div>
          </section>
          <section className={styles.news}>
            <h1 className={styles.cardsHeading}>News</h1>
            <p className={styles.cardsDescription}>
              Updates from our execs! <br />
              See past news here
            </p>
            <hr className={styles.cardsDividingLine} />
            <NewsCard {...unavailableMetadata}>
              <UnavailableContent />
            </NewsCard>
          </section>
        </div>
      </div>
      <DefaultLayout>
        <ConnectWithUs />
        <EmailSignup />
      </DefaultLayout>
    </>
  );
}

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