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): string {
  if (price === null) {
    // should not happen
    return "?";
  }
  const asNumber = Number(price);
  if (isNaN(asNumber)) {
    return price.toString();
  }
  if (asNumber === 0) {
    return "Gratis";
  }
  return `${asNumber} kr`;
}

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

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