import { EventListItemFragment } from "@/gql/graphql";
import { isTodayOrFuture } from "@/lib/date";
import {
  getSingularEvents,
  organizeEventsByDate,
  sortSingularEvents,
} from "@/lib/event";
import { EventItem } from "./EventItem";
import styles from "./upcomingEvents.module.scss";
import { SectionHeader } from "../general/SectionHeader";
import { SectionFooter } from "../general/SectionFooter";

export const UpcomingEvents = ({ events }: { events: EventListItemFragment[] }) => {
  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.upcomingContent}>
        <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>
      </div>
      <SectionFooter link="/arrangementer?mode=calendar" linkText="Vis kalender" />
    </section>
  );
};
