import { EventCategory, EventFragment } from "@/lib/event";
import styles from "./eventHeader.module.scss";
import Image from "@/components/general/Image";
import { Pig } from "../general/Pig";
import Link from "next/link";

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 }) => {
  const featuredImage: any = event.featuredImage;

  return (
    <div className={styles.eventHeader}>
      <div className={styles.text}>
        <span className="suphead breadcrumb">
          <Link href="/arrangementer">Arrangement</Link>
        </span>
        <h1 className={styles.title}>{event.title}</h1>
        <div className={styles.details}>
          <p>Vise neste dato her?</p>
          <div className={styles.prices}>
            {/*<h2>Pris</h2>*/}
            <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.ticketUrl && (
            <a href={event.ticketUrl} className="button cta">
              Kjøp billetter
            </a>
          )}
          {event.facebookUrl && (
            <a href={event.facebookUrl} className="textLink">
              Gå til Facebook-event
            </a>
          )}
          {event.categories.length > 0 && (
            <div>
              Kategorier: {event.categories.map((x) => x.name).join(", ")}
            </div>
          )}
        </div>
      </div>
      <div className={styles.image}>
        {featuredImage && (
          <Image
            src={featuredImage.url}
            alt={featuredImage.alt}
            width={featuredImage.width}
            height={featuredImage.height}
            sizes="100vw"
          />
        )}
      </div>
    </div>
  );
};