---
import InfoPageSections from "../../../../components/InfoPageSections.astro";
import SiteLayout from "../../../../layouts/SiteLayout.astro";
import { getEventNavItems } from "../../../../data/eventNav";
import {
  getEventBasePath,
  getEventByParams,
  yearPathEvents,
} from "../../../../data/events";
import { getInfoPage, infoPages } from "../../../../data/info";

export function getStaticPaths() {
  return yearPathEvents.flatMap((event) =>
    infoPages.map((page) => ({
      params: {
        year: event.year,
        slug: event.slug,
        infoSlug: page.slug,
      },
      props: {
        event,
        page,
      },
    })),
  );
}

const { event, page } = Astro.props;

if (!event || !page) {
  const { year, slug, infoSlug } = Astro.params;
  const fallbackEvent = getEventByParams(year!, slug!);
  const fallbackPage = getInfoPage(infoSlug!);
  if (!fallbackEvent || !fallbackPage) return Astro.redirect("/");
}

const eventTitle = event.shortTitle ?? event.title;
const basePath = getEventBasePath(event);
const infoNavLabel = event.slug === "barcamp" ? "Venue" : "Information";
---

<SiteLayout
  title={`${page.title} - ${eventTitle}`}
  description={page.title}
  theme={event.theme ?? "default"}
  brandHref={basePath}
  brandTitle={eventTitle}
  brandSubtitle="Event home"
  navItems={getEventNavItems(event)}
  accessPassword={event.accessPassword}
>
  <section class="event-page-heading">
    <nav class="event-breadcrumb" aria-label="Event breadcrumb">
      <a href={basePath}>{eventTitle}</a>
      <span aria-hidden="true">/</span>
      <span>{infoNavLabel}</span>
      <span aria-hidden="true">/</span>
      <span>{page.title}</span>
    </nav>
    <p class="eyebrow">{infoNavLabel}</p>
    <h1>{page.title}</h1>
  </section>

  <div class="event-shell event-shell--single">
    <div class="event-content">
      <InfoPageSections page={page} />
    </div>
  </div>
</SiteLayout>
