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

import { Bubble } from "@/components/Bubble";
import { DefaultLayout } from "@/components/DefaultLayout";
import { Image } from "@/components/Image";
import { Link } from "@/components/Link";
import { TeamMember } from "@/components/TeamMember";
import { TeamMemberCard } from "@/components/TeamMemberCard";
import { Title } from "@/components/Title";
import {
  getExec,
  getExecNamePosPairs,
  Metadata,
  getMemberImagePath,
} from "@/lib/team";

import programmeData from "../../content/team/programme-committee.json";
import systemsData from "../../content/team/systems-committee.json";
import terminalData from "../../content/team/terminal-committee.json";
import webData from "../../content/team/web-committee.json";

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

interface SerializedExec {
  content: MDXRemoteSerializeResult;
  metadata: Metadata;
}

interface Props {
  execs: SerializedExec[];
  programme: Metadata[];
  website: Metadata[];
  systems: Metadata[];
  terminal: Metadata[];
}

export default function Team({
  execs,
  programme,
  website,
  systems,
  terminal,
}: Props) {
  return (
    <>
      <Title>Team</Title>
      <DefaultLayout>
        <div className={styles.headerContainer}>
          <div className={styles.headerTextContainer}>
            <h1 className={styles.header}>Meet the Team!</h1>
            <div className={styles.nav}>
              <Link href="#execs">The Executives</Link>
              <Link href="#programme">Programme Committee</Link>
              <Link href="#website">Website Committee</Link>
              <Link href="#system">Systems Committee</Link>
              <Link href="#terminal">Terminal Committee</Link>
            </div>
            <h2
              className={styles.subheading}
              style={{ borderBottom: "none", margin: 0, padding: 0 }}
            >
              The Executives
            </h2>
          </div>
          <Image src="images/team/team-codey.svg" className={styles.codey} />
        </div>
        <div className={styles.execs} id="execs">
          {execs.map((exec) => {
            return (
              <div key={exec.metadata.name}>
                <TeamMemberCard {...exec.metadata}>
                  <MDXRemote {...exec.content} />
                </TeamMemberCard>
              </div>
            );
          })}
        </div>
        <div id="programme">
          <h2 className={styles.subheading}>Programme Committee</h2>
          <MembersList team={programme} />
        </div>
        <div id="website">
          <h2 className={styles.subheading}>Website Committee</h2>
          <MembersList team={website} />
        </div>
        <div id="system">
          <h2 className={styles.subheading}>Systems Committee</h2>
          <MembersList team={systems} />
        </div>
        <div id="terminal">
          <h2 className={styles.subheading}>Terminal Committee</h2>
          <MembersList team={terminal} />
        </div>
      </DefaultLayout>
      <div className={styles.elections}>
        <Bubble>
          <h2 className={styles.electionSubheading}>Elections</h2>
          To find out when and where the next elections will be held, keep an
          eye on on the <Link href="/#news">News</Link>. <br />
          For details on the elections, read our
          <Link href="/about/constitution"> Constitution</Link>.
        </Bubble>
      </div>
    </>
  );
}

Team.Layout = function TeamLayout(props: { children: React.ReactNode }) {
  return <div>{props.children}</div>;
};

interface MembersProps {
  team: Metadata[];
}

function MembersList(props: MembersProps) {
  return (
    <div className={styles.members}>
      {props.team.map((member) => (
        <TeamMember {...member} key={member.name} />
      ))}
    </div>
  );
}

type TeamMember = Omit<Metadata, "image"> & { image?: string };

async function getTeamWithImages(team: TeamMember[]) {
  return await Promise.all(
    team.map(async (member) => {
      const image = member.image ?? (await getMemberImagePath(member.name));
      return {
        ...member,
        image,
      };
    })
  );
}

export const getStaticProps: GetStaticProps<Props> = async () => {
  const execNamePosPairs = await getExecNamePosPairs();

  const execs = (await Promise.all(
    execNamePosPairs.map((namePosPair) => getExec(namePosPair))
  )) as SerializedExec[];

  const [programme, website, systems, terminal] = await Promise.all([
    getTeamWithImages(programmeData),
    getTeamWithImages(webData),
    getTeamWithImages(systemsData),
    getTeamWithImages(terminalData),
  ]);

  return {
    props: { execs, programme, website, systems, terminal },
  };
};