import { EventFragment } from "@/gql/graphql";
import { isTodayOrFuture, formatDate } from "@/lib/date";
import { parse } from "date-fns";
import {
  getSingularEvents,
  organizeEventsByDate,
  sortSingularEvents,
} from "@/lib/event";
import Link from "next/link";
import { EventItem } from "./EventItem";
import styles from "./upcomingEvents.module.scss";
import { SectionHeader } from "../general/SectionHeader";

export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
  const upcomingSingularEvents = sortSingularEvents(
    getSingularEvents(events).filter((event) =>
      isTodayOrFuture(event.occurrence.start)
    )
  );
  const sliced = upcomingSingularEvents.slice(0, 10);
  const eventsByDate = organizeEventsByDate(sliced);

  return (
    <section className={styles.upcomingWrapper}>
      <SectionHeader heading="Dette skjer på Neuf" link="/arrangementer?mode=calendar" linkText="Vis kalender" />
      <div className={styles.eventList}>
        {Object.keys(eventsByDate).map((day) => {
          const eventsThisDay = eventsByDate[day];
          return (
            <div key={day}>
              {/*<h3>
                {formatDate(
                  parse(day, "yyyy-MM-dd", new Date()),
                  "eeee dd.MM."
                )}
              </h3>*/}
              <ul>
                {eventsThisDay.map((event) => (
                  <EventItem
                    key={`${event.id}-${event.occurrence.id}`}
                    event={event}
                    mode="singular-time-only"
                    size="medium"
                  />
                ))}
              </ul>
            </div>
          );
        })}
      </div>
    </section>
  );
};