import React from "react";
import { MDXProvider } from "@mdx-js/react";
import { getExecContent, getExecNames, Metadata } 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 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";

// TODO: get hotdog for elections

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

interface Props {
  execs: SerializedExec[];
}

export default function MeetTheTeam({ execs }: Props) {
  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">
          {execs.map((exec) => {
            return (
              <div key={exec.metadata.name}>
                <TeamMemberCard {...exec.metadata}>
                  <MDXRemote {...exec.content} />
                </TeamMemberCard>
              </div>
            );
          })}
        </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>
        <Bubble>
          <div className={styles.elections}>
            <h2 className={styles.electionSubheading}>Elections</h2>
            <ElectionContent />
          </div>
        </Bubble>
      </>
    </MDXProvider>
  );
}

interface MembersProps {
  team: Array<Metadata>;
}

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

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

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

// 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>
//   );
// }

export const getStaticProps: GetStaticProps<Props> = async () => {
  const execNames = await getExecNames();
  const execs = (await Promise.all(
    execNames.map((name) => getExecContent(name))
  )) as SerializedExec[];

  return {
    props: { execs },
  };
};