import { PageHeader } from '@/compositions/PageHeader/PageHeader'
import { Section } from '@/components/Section/Section'
import { Container } from '@/components/Container/Container'
import { Title } from '@/components/Title/Title'
import { NextPrevButtons } from '@/components/NextPrevButtons/NextPrevButtons'
import moment from 'moment'
import { weekNumber } from '@/utils/week'
import { EventRow } from '@/components/EventRow/EventRow'
import Error from '@/components/Error/Error'
import { fetchWorship } from '@/fetch/worship'
import { tranformWorship } from '@/utils/dto/worship'
import { AdminMenu } from '@/components/AdminMenu/AdminMenu'
import { isAuthenticated } from '@/utils/auth'


export default async function WorshipPage({searchParams}: {
  searchParams: Promise<{ week: string | undefined }>
}) {

  const query = await searchParams;
  let week = query.week;
  if (!week) {
    week = weekNumber(moment());
  }
  const authenticated = await isAuthenticated();

  const fromDate = moment(week, true);

  if (!fromDate.isValid()) {
    return <Error statusCode={422} message={"Woche fehlerhaft formatiert."}/>
  }

  const toDate = moment(week).add(1, 'week');
  const lastWeek = moment(week).subtract(1, 'week');

  const paginatedWorship = await fetchWorship(
    {
      fromDate: fromDate.toDate(),
      tillDate: toDate.toDate()
    }
  );

  if (!paginatedWorship) {
    return <Error statusCode={503} message={"Gottesdienste konnten nicht geladen werden."}/>;
  }

  const events = tranformWorship(paginatedWorship.docs)

  return (
    <>
      <PageHeader
        title={"Gottesdienste"}
        description={"Feiern Sie mit uns den Glauben! Auf dieser Seite finden Sie alle Termine, Details und besondere Highlights unserer Gottesdienste im Überblick. Seien Sie herzlich willkommen! Für genauere Informationen klicken Sie auf den Gottesdiensttermin!"}
      />

      <Section padding={"small"} paddingBottom={"large"}>
        <Container>
              <Title
                color={"contrast"}
                title={`Woche ${week.substring(5)} - ${week.substring(0, 4)}`}
                size={"md"}
              />

              {events.map(e =>
                <EventRow
                  key={e.id}
                  date={e.date}
                  title={e.title}
                  href={e.href}
                  location={e.location}
                  cancelled={e.cancelled}
                />
              )}

              {events.length == 0 &&
                <p>
                  Keine Gottesdienste gefunden
                </p>
              }
        </Container>
      </Section>
      <AdminMenu
        collection={"worship"}
        isAuthenticated={authenticated}
      />

      {events.length > 0 &&
        <Section padding={"small"}>
          <NextPrevButtons
            prev={{
              href: `/gottesdienst?week=${weekNumber(lastWeek)}`,
              text: "Vorige Woche"
            }}
            next={{
              href: `/gottesdienst?week=${weekNumber(toDate)}`,
              text: "Nächste Woche"
            }}
          />
        </Section>
      }
    </>
  )
}