import { EventFragment } from "@/lib/event";
import styles from "./eventHeader.module.scss";
import { Image } from "@/components/general/Image";
import Link from "next/link";
import { OrganizerList } from "./OrganizerList";
import Icon from "../general/Icon";
import { Breadcrumb } from "../general/Breadcrumb";

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

export const EventHeader = ({ event }: { event: EventFragment }) => {
  // TODO: where should we show image attribution for the featured image?

  const featuredImage: any = event.featuredImage;

  return (
    <div className={styles.eventHeader}>
      <div className={styles.text}>
        <Breadcrumb link="/arrangementer" text="Arrangement" />
        <h1 className={styles.title}>{event.title}</h1>
        <div className={styles.eventDetails}>
          <div className={styles.prices}>
            <span className={styles.label}>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.categories.length > 0 && (
            <div>
              <span className={styles.label}>Kategorier:</span>{" "}
              {event.categories.map((x) => x.name).join(", ")}
            </div>
          )}
          {event.organizers && (
            <div>
              <span className={styles.label}>Arrangeres av:</span>{" "}
              <OrganizerList event={event} />
            </div>
          )}
        </div>
        {event.ticketUrl && (
          <a href={event.ticketUrl} className="button cta">
            <span>Kjøp billetter</span>
            <Icon type="tickets" />
          </a>
        )}
        {event.facebookUrl && (
          <a href={event.facebookUrl} className="button tertiary">
            <span>Gå til Facebook-event</span>
            <Icon type="externalLink" />
          </a>
        )}
      </div>
      <div className={styles.image}>
        {featuredImage && (
          <Image
            src={featuredImage.url}
            alt={featuredImage.alt}
            width={featuredImage.width}
            height={featuredImage.height}
            sizes="100vw"
          />
        )}
      </div>
    </div>
  );
};