import React, { ReactNode } from "react";
// import { Button } from "./Button";
import { Image } from "./Image";
import { EventSetting } from "./EventSetting";
import styles from "./EventDescriptionCard.module.css";

interface BaseProps {
  name: string;
  date: Date;
  poster: string;
  registerLink?: string;
  children: ReactNode;
}

type Props = BaseProps &
  (
    | { online: true; location: keyof typeof links }
    | { online: false; location: string }
  );

const links = {
  Twitch: "https://www.twitch.tv/uwcsclub",
  Discord: "https://discord.gg/pHfYBCg",
  Facebook: "https://www.facebook.com/uw.computerscienceclub",
  Instagram: "https://www.instagram.com/uwcsclub/",
};

/**
 * @remarks
 * - Child elements will display as the event's description
 * - Assuming date prop is in EST
 * - poster is the event's image name, including file ending (.jpg/.png/etc)
 * - If event is online, location will be the platform, with capital first letter and no trailing spaces
 *    - ie. location="Discord"
 * @todo
 * get Link component
 */
export function EventDescriptionCard(props: Props) {
  return (
    <article className={styles.card}>
      <Image className={styles.poster} src={props.poster} alt={props.name} />

      <div className={styles.details}>
        <h3 className={styles.name}>{props.name}</h3>

        <EventSetting
          date={props.date}
          online={props.online}
          location={props.location}
        />
        <div className={styles.desc}>{props.children}</div>
        <div className={styles.spacer}></div>

        <footer>
          {props.registerLink && (
            <div className={styles.button}>
              <button>
                <a href={props.registerLink}>Register</a>
              </button>
            </div>
          )}
          {props.online && (
            <a target="_blank" href={links[props.location]} rel="noreferrer">
              <Image
                className={styles.logo}
                alt={props.location}
                src={"logos/" + props.location + ".png"}
              />
            </a>
          )}
        </footer>
      </div>
    </article>
  );
}