import { EventFragment } from "@/lib/event";
import styles from "./eventDetails.module.scss";
import { OrganizerList } from "./OrganizerList";
import Icon from "../general/Icon";
import { DateList } from "./DateList";

function formatPrice(price: number): string {
  if (price === null) {
    // should not happen
    return "?";
  }
  if (price === 0) {
    return "Gratis";
  }
  return `${price} kr`;
}

export const EventDetails = ({ event }: { event: EventFragment }) => {
  const featuredImage: any = event.featuredImage;

  return (
    <div className={styles.eventDetails}>
      <div className={styles.content}>
        <div className={styles.prices}>
          <span className="suphead">Pris</span>
          <ul className={styles.priceList}>
            {event.free && (
              <li className={styles.priceItem}>
                <span>Gratis</span>
              </li>
            )}
            {typeof event.priceRegular === "number" && (
              <li className={styles.priceItem}>
                <span className={styles.priceLabel}>Ordinær</span>{" "}
                {formatPrice(event.priceRegular)}
              </li>
            )}
            {typeof event.priceStudent === "number" && (
              <li className={styles.priceItem}>
                <span className={styles.priceLabel}>Student</span>{" "}
                {formatPrice(event.priceStudent)}
              </li>
            )}
            {typeof event.priceMember === "number" && (
              <li className={styles.priceItem}>
                <span className={styles.priceLabel}>Medlem</span>{" "}
                {formatPrice(event.priceMember)}
              </li>
            )}
          </ul>
        </div>
        {event.organizers && (
          <div>
            <div className="suphead">Arrangeres av</div>{" "}
            <OrganizerList event={event} />
          </div>
        )}
        {event.facebookUrl && (
          <a href={event.facebookUrl} className="button tertiary">
            <span>Gå til Facebook-event</span>
            <Icon type="externalLink" />
          </a>
        )}
      </div>
      <DateList event={event} />
    </div>
  );
};
