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

interface Props {
  name: string;
  online: boolean;
  location: string;
  date: Date;
  poster?: string;
  registerLink?: string;
  children: ReactNode;
}

function getPlatformURL(platform: string) {
  switch (platform) {
    case "Twitch":
      return "https://www.twitch.tv/uwcsclub";
    case "Discord":
      return "https://discord.gg/pHfYBCg";
    case "Facebook":
      return "https://www.facebook.com/uw.computerscienceclub";
    case "Instagram":
      return "https://www.instagram.com/uwcsclub/";
    default:
      return;
  }
}

/**
 * @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({
  location,
  poster,
  name,
  date,
  online,
  registerLink,
  children,
}: Props) {
  const platformURL = getPlatformURL(location);

  return (
    <article className={styles.card}>
      {poster && <Image className={styles.poster} src={poster} alt={name} />}

      <div className={styles.details}>
        <h3 className={styles.name}>{name}</h3>
        <h4 className={styles.setting}>
          <EventSetting date={date} online={online} location={location} />
        </h4>
        <div className={styles.desc}>{children}</div>
        <div className={styles.spacer}></div>

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