import React, { useState } from "react";
import { Image } from "./Image";
import { useWindowDimension } from "../hooks/useWindowDimension";
import styles from "./TeamMemberCard.module.css";

export interface TeamMemberCardProps {
  name: string;
  role: string;
  image?: string; // path to image of person, relative to public directory
  children: React.ReactNode;
}

export function TeamMemberCard({
  name,
  image,
  role,
  children,
}: TeamMemberCardProps) {
  const { width } = useWindowDimension();
  const [isOpen, setIsOpen] = useState(false);
  const handleClick = () => {
    if (width <= 768) {
      setIsOpen(!isOpen);
    }
  };
  return (
    <>
      <article className={styles.card} onClick={handleClick}>
        <div className={styles.picture}>
          <Image
            className={styles.image}
            src={image ?? "/images/team/team-member-placeholder.svg"}
            alt={`Picture of ${name}`}
          />
        </div>
        <h1 className={styles.name}>{name}</h1>
        <h2 className={styles.role}>{role}</h2>
        <div className={styles.description}>{children}</div>
      </article>
      {isOpen && (
        <ExecPopup
          name={name}
          role={role}
          image={image}
          handleClick={handleClick}
        >
          {children}
        </ExecPopup>
      )}
    </>
  );
}

interface Propup extends TeamMemberCardProps {
  handleClick: () => void;
}

function ExecPopup({ name, image, role, children, handleClick }: Propup) {
  return (
    <>
      <div className={styles.popupBackground} onClick={handleClick} />
      <div className={styles.popupContainer}>
        <button className={styles.closeBtn} onClick={handleClick}>
          <Image src="images/team/popup-close.svg" />
        </button>
        <div className={styles.popupContent}>
          <div className={styles.picture}>
            <Image
              className={styles.popupImage}
              src={image ?? "/images/team/team-member-placeholder.svg"}
              alt={`Picture of ${name}`}
            />
          </div>
          <h1 className={styles.popupName}>{name}</h1>
          <h2 className={styles.popupRole}>{role}</h2>
          <div className={styles.popupDescription}>{children}</div>
        </div>
      </div>
    </>
  );
}
