import React, { ComponentType, ReactNode, useState } from "react";
import { MDXProvider } from "@mdx-js/react";
import { Image } from "../../components/Image";
import { TeamMemberCard } from "../../components/TeamMemberCard";
import { TeamMember } from "../../components/TeamMember";
import { Link } from "../../components/Link";
import ElectionContent from "../../content/meet-the-team/elections.mdx";
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 styles from "./team.module.css";

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

export default function MeetTheTeam() {
  return (
    <MDXProvider components={{}}>
      <>
        <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.execsDesktop} id="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.execsMobile} id="execs">
          <MobileExec metadata={KallenMetadata} content={KallenTu} />
          <MobileExec metadata={GordonMetadata} content={GordonLe} />
          <MobileExec metadata={RavinduMetadata} content={RavinduAngammana} />
          <MobileExec metadata={NeilMetadata} content={NeilParikh} />
          <MobileExec metadata={MaxMetadata} content={MaxErenberg} />
        </div>
        <div className={styles.programme} id="programme">
          <h2 className={styles.subheading}>Programme Committee</h2>
          <MembersList team={programme} />
        </div>
        <div className={styles.website} id="website">
          <h2 className={styles.subheading}>Website Committee</h2>
          <MembersList team={website} />
        </div>
        <div className={styles.system} id="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;
}

interface MobileExecProps {
  metadata: Metadata;
  content: ComponentType;
}

interface Propup extends MobileExecProps {
  handleClose: () => void;
}

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

function MobileExec(props: MobileExecProps) {
  const [isOpen, setIsOpen] = useState(false);
  const togglePopup = () => {
    setIsOpen(!isOpen);
  };
  return (
    <>
      <button
        className={styles.reset_button + " " + styles.execButton}
        onClick={togglePopup}
      >
        <TeamMember {...props.metadata} size="medium" />
      </button>
      {isOpen && (
        <>
          <div className={styles.popup_background} onClick={togglePopup}></div>
          <ExecPopup
            metadata={props.metadata}
            content={props.content}
            handleClose={togglePopup}
          />
        </>
      )}
    </>
  );
}

function ExecPopup(props: Propup) {
  return (
    <div className={styles.popup_container}>
      <div className={styles.popup_content}>
        <button className={styles.reset_button} onClick={props.handleClose}>
          <Image src="images/team/popup-close.svg" className={styles.close} />
        </button>
        <div className={styles.exec}>
          <TeamMember {...props.metadata} size="medium" />
          <props.content />
        </div>
      </div>
    </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 } };
// }