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 { Event, Worship } from '@/payload-types'
import { transformEvents } from '@/utils/dto/events'
import { tranformWorship } from '@/utils/dto/worship'
import { Button } from '@/components/Button/Button'
import { TextDiv } from '@/components/Text/TextDiv'
import { Gallery, GalleryItem } from '@/components/Gallery/Gallery'

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



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

  return (
    <>
      <ImageWithText title={title} image={image} text={description} />

      <Section>
        <Container>
          <Row>
            <Col>
              <Title title={"Veranstaltungen"} size={"md"}/>
              <Events events={transformEvents(events)} n={4}/>

              <MarginBottom />

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

              <ContactPersonList persons={contactPersons} />

              <Section padding={"small"}>
                { announcement &&
                  <Button href={announcement} size={"md"}>Aktuelle Vermeldungen</Button>
                }
              </Section>
            </Col>
          </Row>
        </Container>
      </Section>

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

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


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