import styles from "./styles.module.scss"
import { Worship as WorshipType } from '@/payload-types'
import { useDate } from '@/hooks/useCompactDate'
import { Section } from '@/components/Section/Section'
import { Title } from '@/components/Title/Title'
import { liturgicalDayName } from '@/hooks/liturgicalDayName'
import { EventExcerpt, EventExcerptRow } from '@/components/EventExcerpt/EventExcerpt'
import { transformCategory } from '@/utils/dto/worship'
import { TextDiv } from '@/components/Text/TextDiv'
import { church } from '@/utils/church'
import { ChurchIcon } from '@/components/ChurchIcon/ChurchIcon'
import { Cross } from '@/components/Cross/Cross'
import { Testimony } from '@/components/Testimony/Testimony'

type WorshipPageProps = {
  worship: WorshipType
}

export const Worship = ({ worship }: WorshipPageProps) => {
  const date = new Date(worship.date);
  const day = date.toLocaleDateString('de-DE', {weekday: 'long'} )
  const localeDate = useDate(worship.date)
  const liturgicalDay = worship.liturgicalDay ? worship.liturgicalDay : liturgicalDayName(worship.date);
  const what = worship.title ? worship.title : transformCategory(worship.type);
  const time = date.toLocaleTimeString("de-DE", { timeStyle: "short", timeZone: "Europe/Berlin" });

  return (
    <>
      <Section>
        <div className={styles.textCenter}>
          <Cross schema={"contrast"} />
        </div>
        <Title
          title={`${day}, ${localeDate}`}
          size={'xl'}
          color={'contrast'}
          align={"center"}
        />

        <p className={styles.liturgicalDay}>
          {liturgicalDay}
        </p>
      </Section>

      <Section padding={"medium"}>
        <EventExcerpt>
          <EventExcerptRow label={"Was:"}>
            {what}
          </EventExcerptRow>
          <EventExcerptRow label={"Wo:"}>
            { typeof worship.location == "object" &&
              <TextDiv text={`${worship.location.name}\n${worship.location.address}\n${time} Uhr`} />
            }
          </EventExcerptRow>
          { worship.celebrant &&
            <EventExcerptRow label={"Zelebrant:"}>
              {worship.celebrant}
            </EventExcerptRow>
          }

          { typeof worship.description === "string" && worship.description != "" &&
            <EventExcerptRow label={"Hinweise:"}>
              <TextDiv text={worship.description} />
            </EventExcerptRow>
          }

          <div>
            <div className={styles.church}>
              <ChurchIcon
                church={church(typeof worship.location == "object" ? worship.location.name : "clara")}
                color={"#426156"}
                style={"filled"}
                stroke={3}
              />
            </div>
          </div>
        </EventExcerpt>
      </Section>

      <Section>
        <Testimony testimony={"Du bringst nichts mit hinein, Du nimmst nichts mit hinaus
Lass eine goldene Spur zurück, Im alten Erdenhaus"} />
      </Section>
    </>
  )
}