import React from "react";
import {
  getExec,
  getExecNames,
  Metadata,
  getMemberImagePath,
} from "../../lib/team";
import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
import { GetStaticProps } from "next";
import { Image } from "../../components/Image";
import { TeamMemberCard } from "../../components/TeamMemberCard";
import { TeamMember } from "../../components/TeamMember";
import { Link } from "../../components/Link";
import { Bubble } from "../../components/Bubble";
import programmeData from "../../content/meet-the-team/programme-committee.json";
import websiteData from "../../content/meet-the-team/website-committee.json";
import systemsData from "../../content/meet-the-team/systems-committee.json";
import styles from "./team.module.css";

// TODO: fix hotdog for elections
//       change News link in elections to point to News page

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

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

export default function Team({ execs, programme, website, systems }: Props) {
  return (
    <>
      <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>
          </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>
      <Bubble>
        <div className={styles.elections}>
          <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</Link>. <br />
          For details on the elections, read our
          <Link href="/about/constitution"> Constitution</Link>
        </div>
      </Bubble>
    </>
  );
}

interface MembersProps {
  team: Metadata[];
}

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

async function getMemberImage(team: Omit<Metadata, "image">[]) {
  return await Promise.all(
    team.map(async (member) => {
      const image = await getMemberImagePath(member.name);
      return {
        ...member,
        image,
      };
    })
  );
}

export const getStaticProps: GetStaticProps<Props> = async () => {
  const execNames = await getExecNames();
  const execs = (await Promise.all(
    execNames.map((name) => getExec(name))
  )) as SerializedExec[];
  const programme = await getMemberImage(programmeData);
  const website = await getMemberImage(websiteData);
  const systems = await getMemberImage(systemsData);

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