import { getPayloadHMR } from '@payloadcms/next/utilities'
import configPromise from '@payload-config'
import { Menu } from '@/components/Menu/Menu'
import { useLocation } from '@/hooks/useLocation'
import { useLiturgyCalendarTitle } from '@/hooks/useLiturgyCalendarTitle'
import { Container } from '@/components/Container/Container'
import { Card } from '@/components/Card/Card'
import styles from './styles.module.css'
import { MassTitle } from '@/components/MassTitle/MassTitle'
import { useCompactDate, useDate } from '@/hooks/useCompactDate'
import { useTime } from '@/hooks/useTime'
import { Pill } from '@/components/Pill/Pill'
import { useMassType } from '@/hooks/useMassType'
import Image from 'next/image'
import bell from './bell.svg'
import locationIcon from './location.svg'
import question from './question.svg'
import { LocationMap } from '@/components/Map/Map'
import { Testimony } from '@/components/Testimony/Testimony'

export default async function Page({ params }: { params: { id: string } }) {
  const payload = await getPayloadHMR({ config: configPromise })
  const worship = await payload.findByID({
    id: params.id,
    collection: 'worship',
  })
  const location = useLocation(worship.location)
  const title = useLiturgyCalendarTitle(worship.date)
  const date = useDate(worship.date)
  const time = useTime(worship.date)
  const type = useMassType(worship.type)

  return (
    <>
      <Menu />

      <Container>
        <MassTitle title={title} cancelled={worship.cancelled} />

        <div className={styles.info}>
          <Card>
            <div className={styles.centerIcon}>
              <Image
                src={bell}
                alt={'Location'}
                width={60}
                className={styles.cardIcon}
              />
            </div>
            <div className={styles.cardContent}>
              <div className={styles.marginBottom}>
                {date} <br />
                {time} Uhr <br />
              </div>

              <Pill>{type}</Pill>
            </div>
          </Card>

          <Card>
            <div className={styles.centerIcon}>
              <Image
                src={locationIcon}
                alt={'Location'}
                width={60}
                className={styles.cardIcon}
              />
            </div>
            <div className={styles.cardContent}>
              <div className={styles.address}>
                {location.name} <br />
                {location.address}
              </div>
            </div>
          </Card>

          {worship.description && (
            <Card>
              <div className={styles.centerIcon}>
                <Image
                  src={question}
                  alt={'Location'}
                  width={60}
                  className={styles.cardIcon}
                />
              </div>

              <div className={styles.cardText}>{worship.description}</div>
            </Card>
          )}
        </div>
      </Container>

      <LocationMap />
      <Testimony
        name={'Johan Shafer'}
        testimony={
          '"Die Eucharistie ist für mich wie ein spiritueller Boost. Wenn ich die Hostie empfange, fühle ich mich krass verbunden mit Jesus. Es ist wie ein Reminder, dass ich nicht allein bin, egal was abgeht. Dieser Moment gibt mir richtig Power und lässt mich mit einem starken Gefühl von Frieden und Hoffnung rausgehen."'
        }
      />
    </>
  )
}