"use client";

import { useState } from "react";
import {
  formatDate,
  formatExtendedDateTime,
  isTodayOrFuture,
  compareDates,
} from "@/lib/date";
import { EventFragment, EventOccurrence } from "@/lib/event";
import styles from "./dateList.module.scss";
import Link from "next/link";

const DateListItem = ({ occurrence }: { occurrence: EventOccurrence }) => {
  const timeFormat = "'kl.' HH:mm";
  const wholeCastle = occurrence.venue?.slug === "hele-huset";

  return (
    <li
      className={`${styles.date} ${
        isTodayOrFuture(occurrence.start) ? styles.future : styles.past
      }`}
    >
      <div className={styles.time}>
        <span className={styles.day}>
          {formatExtendedDateTime(occurrence.start, true)}
        </span>{" "}
        <span className={styles.hour}>
          {formatDate(occurrence.start, timeFormat)}
        </span>{" "}
        {wholeCastle && <span className={styles.venue}>på Chateau Neuf</span>}
        {!wholeCastle && (
          <span className={styles.venue}>
            {occurrence.venue?.preposition + " " ?? ""}
            {occurrence.venue?.url && (
              <Link href={occurrence.venue?.url}>
                {occurrence.venue?.title}
              </Link>
            )}
            {!occurrence.venue?.url && <>{occurrence.venue?.title}</>}
          </span>
        )}
      </div>
    </li>
  );
};

export const DateList = ({ event }: { event: EventFragment }) => {
  const [showAllDates, setShowAllDates] = useState(false);
  function toggleDates() {
    setShowAllDates(!showAllDates);
  }

  const oneOff = event.occurrences.length === 1;
  const showToggle = event.occurrences.length > 4;
  const futureOccurrences = event.occurrences
    .filter((occurrence) => isTodayOrFuture(occurrence.start))
    .sort((a, b) => compareDates(a.start, b.start));

  let visibleOccurrences = [];
  if (oneOff || showAllDates || event.occurrences.length <= 4) {
    visibleOccurrences = event.occurrences;
  } else {
    visibleOccurrences = futureOccurrences.slice(0, 4);
  }

  // TODO: end date/time?

  return (
    <div className={styles.dateWrapper}>
      <div className={`${styles.header} suphead`}>
        <span>Dato</span>
        <span>Tid</span>
        <span>Sted</span>
      </div>
      <ul className={styles.dateList} data-showall={showAllDates}>
        {visibleOccurrences.map((occurrence) => (
          <DateListItem
            key={occurrence.id}
            occurrence={occurrence as EventOccurrence}
          />
        ))}
      </ul>
      {showToggle && (
        <div className={styles.showMore}>
          <button onClick={() => toggleDates()} className="button tertiary">
            {!showAllDates && (
              <span>Vis alle datoer ({event.occurrences.length})</span>
            )}
            {showAllDates && <span>Vis færre datoer</span>}
          </button>
        </div>
      )}
    </div>
  );
};