"use client";

import styles from "./eventItem.module.scss";
import Link from "next/link";
import { Image } from "@/components/general/Image";
import {
  SingularEvent,
  EventFragment,
  getFutureOccurrences,
} from "@/lib/event";
import {
  formatDate,
  formatDateRange,
  formatExtendedDateTime,
  groupConsecutiveDates,
} from "@/lib/date";

const DATE_PILLS_TO_SHOW = 2;

export const EventItem = ({
  event,
  mode,
  size,
}: {
  event: SingularEvent | EventFragment;
  mode: "list" | "calendar" | "singular-time-only";
  size?: "small" | "medium" | "large";
}) => {
  const futureOccurrences = getFutureOccurrences(event);
  const groupedOccurrences = groupConsecutiveDates(
    futureOccurrences.map((occurrence) => occurrence.start)
  );
  const numOccurrences = event?.occurrences?.length ?? 0;
  const nextOccurrence = numOccurrences ? groupedOccurrences[0] : null;
  const featuredImage: any = event.featuredImage;

  return (
    <li
      className={`${styles.eventItem} ${
        size ? styles[size] : styles.large
      } linkItem`}
    >
      <div className={styles.image}>
        {featuredImage && (
          <Image
            src={featuredImage.url}
            alt={featuredImage.alt}
            width={0}
            height={0}
            sizes="20vw"
          />
        )}
      </div>
      <div className={styles.time}>
        {mode === "list" && nextOccurrence && (
          <div className={styles.dates}>
            {groupedOccurrences.slice(0, DATE_PILLS_TO_SHOW).map((group) => (
              <span key={group[0]} className={styles.datePill}>
                {formatDateRange(group)}
              </span>
            ))}
            {groupedOccurrences.length > DATE_PILLS_TO_SHOW && (
              <span className={styles.moreDates}>{`+${groupedOccurrences
                .slice(DATE_PILLS_TO_SHOW)
                .reduce((sum, group) => sum + group.length, 0)}`}</span>
            )}
          </div>
        )}
        {(mode === "calendar" || mode === "singular-time-only") &&
          "occurrence" in event &&
          event.occurrence?.start && (
            <p className={styles.dates}>
              {formatDate(event.occurrence?.start, "'kl.' HH:mm")}
            </p>
          )}
      </div>
      <div className={styles.text}>
        <h1 className={styles.title}>{event.title}</h1>
        <p className={styles.details}>Evt. andre detaljer</p>
      </div>
      <Link href={`/arrangementer/${event.slug}`} className="hiddenLink">
        Mer om arrangementet {event.title}
      </Link>
    </li>
  );
};