import { ImageWithText } from '@/compositions/ImageWithText/ImageWithText'
import { StaticImageData } from 'next/image'
import { Section } from '@/components/Section/Section'
import { Row } from '@/components/Flex/Row'
import { Col } from '@/components/Flex/Col'
import { Container } from '@/components/Container/Container'
import { Title } from '@/components/Title/Title'
import { TwoColumnText } from '@/components/TwoColumnText/TwoColumnText'
import { Events } from '@/compositions/Events/Events'
import { MarginBottom } from '@/components/Margin/MarbinBottom'
import { ContactPersonList } from '@/components/ContactPerson/ContactPersonList'
import { EventOccurrence, Worship } from '@/payload-types'
import { transformOccurrences } from '@/utils/dto/events'
import { tranformWorship } from '@/utils/dto/worship'
import { TextDiv } from '@/components/Text/TextDiv'
import { Gallery, GalleryItem } from '@/components/Gallery/Gallery'
import { CalendarAnnouncementButtons } from '@/compositions/CalendarAnnouncementButtons/CalendarAnnouncementButtons'
import { Parish as ParishEntity} from '@/payload-types'
import { ParishBlocks } from '@/compositions/Blocks/ParishBlocks'

type ParishProps = {
  title: string,
  slug: string,
  image: string | StaticImageData,
  description: string,
  history: string
  contactPersons: {
    title: string,
    description: string
  }[],
  contact: string
  events: EventOccurrence[],
  worship: Worship[]
  announcement?: string,
  calendar?: string,
  gallery?: GalleryItem[]
  content?: ParishEntity['content']
}



export const Parish = (
  {
    title,
    slug,
    image,
    description,
    history,
    contactPersons,
    contact,
    events,
    worship,
    announcement,
    content,
    calendar,
    gallery
  }
  : ParishProps
) => {

  return (
    <>
      <ImageWithText
        title={title}
        image={image}
        text={description}
        link={<CalendarAnnouncementButtons calendar={calendar} announcements={announcement}/>}
      />

      <Section padding={"small"} paddingBottom={"large"}>
        <Container>
          <Row>
            <Col>
              <Title title={"Veranstaltungen"} size={"md"} color={"contrast"}/>
              <Events events={transformOccurrences(events)} n={4} schema={"contrast"}/>

              <MarginBottom />

              <Title title={"Gottesdienste"} size={"md"} color={"base"} />
              <Events events={tranformWorship(worship)} n={4}/>
            </Col>
            <Col>
              <Title title={"Kontakt"} size={"md"} color={"contrast"} />

              <ContactPersonList persons={contactPersons} />
            </Col>
          </Row>
        </Container>
      </Section>

      <Section backgroundColor={"off-white"}>
        <Container>
          <Title title={"Unsere Geschichte"} />
          <TwoColumnText text={history} />
        </Container>
      </Section>

      { content && content.length > 0 &&
        <Section padding={"small"}>
          <ParishBlocks content={content} />
        </Section>
      }

      { gallery && gallery.length > 0 &&
        <Section paddingBottom={"small"}>
          <Gallery items={gallery} />
        </Section>
      }


      <Section>
        <Container textAlign={"center"}>
          <Title title={"Kontakt"} size={"md"} align={"center"} />
          <TextDiv text={contact} />
        </Container>
      </Section>
    </>
  )
}