import React from "react";
import { MDXProvider } from "@mdx-js/react";
import { Image } from "../../components/Image";
import ElectionContent from "../../content/meet-the-team/elections.mdx";
import { TeamMemberCard } from "../../components/TeamMemberCard";
import { TeamMember } from "../../components/TeamMember";
import styles from "./team.module.css";
import programme from "../../content/meet-the-team/programme-committee.json";
import website from "../../content/meet-the-team/website-committee.json";
import systems from "../../content/meet-the-team/systems-committee.json";

import KallenTu, {
  metadata as KallenMetadata,
} from "../../content/meet-the-team/execs/Kallen-Tu.team-member.mdx";
import GordonLe, {
  metadata as GordonMetadata,
} from "../../content/meet-the-team/execs/Gordon-Le.team-member.mdx";
import RavinduAngammana, {
  metadata as RavinduMetadata,
} from "../../content/meet-the-team/execs/Ravindu-Angammana.team-member.mdx";
import NeilParikh, {
  metadata as NeilMetadata,
} from "../../content/meet-the-team/execs/Neil-Parikh.team-member.mdx";
import MaxErenberg, {
  metadata as MaxMetadata,
} from "../../content/meet-the-team/execs/Max-Erenberg.team-member.mdx";

// TODO: get hotdog for elections
//       add member info
//       get exec info
//       mobile

export default function MeetTheTeam() {
  return (
    <MDXProvider components={{}}>
      <>
        <div className={styles.headerContainer}>
          <div className={styles.headerTextContainer}>
            <h1 className={styles.header}>Meet the Team!</h1>
            <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}>
          {/* {props.execs.map((exec) => {
            return (
              <div key={exec.metadata.name}>
                <TeamMemberCard {...exec.metadata}>
                  {exec.content}
                </TeamMemberCard>
              </div>
            );
          })} */}
          <TeamMemberCard {...KallenMetadata}>
            <KallenTu />
          </TeamMemberCard>
          <TeamMemberCard {...GordonMetadata}>
            <GordonLe />
          </TeamMemberCard>
          <TeamMemberCard {...RavinduMetadata}>
            <RavinduAngammana />
          </TeamMemberCard>
          <TeamMemberCard {...NeilMetadata}>
            <NeilParikh />
          </TeamMemberCard>
          <TeamMemberCard {...MaxMetadata}>
            <MaxErenberg />
          </TeamMemberCard>
        </div>
        <div className={styles.programme}>
          <h2 className={styles.subheading}>Programme Committee</h2>
          <MembersList team={programme} />
        </div>
        <div className={styles.website}>
          <h2 className={styles.subheading}>Website Committee</h2>
          <MembersList team={website} />
        </div>
        <div className={styles.system}>
          <h2 className={styles.subheading}>Systems Committee</h2>
          <MembersList team={systems} />
        </div>
        <div className={styles.elections}>
          <h2 className={styles.electionSubheading}>Elections</h2>
          <ElectionContent />
        </div>
      </>
    </MDXProvider>
  );
}

interface MembersProps {
  team: Array<Metadata>;
}

interface Metadata {
  name: string;
  role: string;
  image?: string;
}

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

// -- Dynamic Import logic --

// import { readdirSync } from "fs";
// import { InferGetStaticPropsType } from "next";
// import dynamic from "next/dynamic";

// const files = readdirSync("content/meet-the-team/execs/")

// const components = files.map((file) =>
// dynamic(() => import("../../" + execsPath + file))
// );

// props: InferGetStaticPropsType<typeof getStaticProps>

// export async function getStaticProps() {
//   // const execs: ExecProps[] = [];
//   const files = readdirSync(execsPath);
//   console.log(files);
//   // files.map(async (file: string) => {
//   //   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
//   //   const exec = await import("../../" + execsPath + file);
//   //   exec.content = <exec.default />;
//   //   execs.push(exec);
//   // });
//   return { props: { files } };
// }