import { Section } from '@/components/Section/Section'
import { Container } from '@/components/Container/Container'
import { notFound } from 'next/navigation'
import { Worship } from '@/payload-types'
import { Title } from '@/components/Title/Title'
import { HR } from '@/components/HorizontalRule/HorizontalRule'
import { liturgicalDayName } from '@/hooks/liturgicalDayName'
import { ChurchWithContact } from '@/compositions/ChurchWithContact/ChurchWithContact'
import { transformCategory } from '@/utils/dto/worship'
import { readableDateTime } from '@/utils/readableDate'

export default async function WorshipPage({ params }: { params: Promise<{id: string}>}) {

  const id = (await params).id;
  const res = await fetch(`http://localhost:3000/api/worship/${id}`);
  if (!res.ok) {
    notFound()
  }

  const event = await res.json() as Worship;
  const subtitle = event.title ? event.title : transformCategory(event.type);
  const title = event.liturgicalDay ? event.liturgicalDay : liturgicalDayName(event.date);
  const church = typeof event.location === "string" ? { name: "Unkown", address: "unknown"} : event.location;
  return (
    <>
      <Section>
        <Container>
          <Title title={title} subtitle={subtitle} />
        </Container>
        <HR/>
      </Section>

      <Section backgroundColor={"off-white"}>
        <Container textAlign="center">
          <>
            <p>
              <strong>{church.name}</strong> <br/>
              {readableDateTime(event.date)}
            </p>

            { event.celebrant &&
            <p>
              <strong>Zelebrant</strong><br/>
              {event.celebrant}
            </p>
            }

            {event.description &&
              <p>
                <strong>Hinweis</strong><br />
                {event.description}
              </p>
            }
          </>
        </Container>
      </Section>


      <Section>
        <Container>
        <ChurchWithContact
            church={church.name}
            contact={church.address}
          />
        </Container>
      </Section>
    </>

  )
}