import { Blog, Worship, Event, Highlight } from '@/payload-types'
import { Banner } from '@/components/Banner/Banner'
import { Container } from '@/components/Container/Container'
import { Section } from '@/components/Section/Section'
import { MainText } from '@/components/MainText/MainText'
import { HR } from '@/components/HorizontalRule/HorizontalRule'
import { Title } from '@/components/Title/Title'
import { MassRow } from '@/components/MassTable/MassRow'
import { MassTable } from '@/components/MassTable/MassTable'
import { ImageCardSlider } from '@/compositions/ImageCardSlider/ImageCardSlider'
import { blogToSlides } from '@/utils/dto/blog'
import { ImageWithText } from '@/compositions/ImageWithText/ImageWithText'
import forest from '@/assets/forest.jpeg'
import { ContentWithSlider } from '@/compositions/ContentWithSlider/ContentWithSlider'
import { EventRow } from '@/components/EventRow/EventRow'
import { highlightLink } from '@/utils/dto/highlight'
import { Events } from '@/compositions/Events/Events'
import { transformEvents } from '@/utils/dto/events'
import { ContactSection } from '@/compositions/ContactSection/ContactSection'

type HomeProps = {
  schema: 'base' | 'contrast',
  events: Event[],
  worship: Worship[],
  blog: Blog[],
  highlights: Highlight[],
}

const sortWorship = (worship: Worship[]) => {
  const map = new Map<string, Worship[]>()

  worship.map(w => {
    if (typeof w.location === 'object') {
      const title = w.location.name

      if (map.has(title)) {
        map.get(title)?.push(w)
      } else {
        map.set(title, [w])
      }
    }
  })

  return map
}


export const Home = ({
  schema,
  events,
  worship,
  blog,
  highlights
}: HomeProps) => {
  const worshipPerLocation = Array.from(
    sortWorship(worship).entries(),
  ).sort(
    (a, b) => {
      const nameA = a[0]
      const nameB = b[0]

      if (nameA < nameB) {
        return -1
      }
      if (nameA > nameB) {
        return 1
      }

      // names must be equal
      return 0
    },
  )

  return (
    <>
      <Banner />

      <Container>
        <Section>
          <MainText
            text={'Wir begrüßen Sie herzlich in unserer Pfarrei Hl. Drei Könige und im bunten Neukölln mit einer Vielfalt von Kulturen und Nationalitäten. \n' +
              'Wie die drei Weisen aus dem Morgenland wollen wir uns immer wieder neu auf den Weg machen.'} />
        </Section>
      </Container>

      <HR />

      <Container>
        <Section paddingBottom={'medium'}>
          <Title
            title={'Nächste Gottesdiensten'}
            subtitle={'Komm einfach vorbei!'}
            color={schema}
            align={'center'}
          />

          <Section padding={'small'}>
            <MassRow>
              {worshipPerLocation.map(value => <MassTable key={value[0]} location={value[0]} masses={value[1]} />)}
            </MassRow>
          </Section>

        </Section>


        {blog && blog.length > 0 &&
          <Section>
            <Title title={'Aktuelles'} color={schema} />
            <ImageCardSlider slides={blogToSlides(blog)} />
          </Section>
        }
      </Container>

      {<ImageWithText
        backgroundColor={'soft'}
        title={'Über uns'}
        schema={schema}
        text={'Wir begrüßen Sie herzlich in unserer Pfarrei Hl. Drei Könige und im bunten Neukölln mit einer Vielfalt von Kulturen und Nationalitäten.\n' +
          '\n' +
          'Unsere Pfarrei Hl. Drei Könige wurde am 01.01.2020 gegründet. Am 12.01.2020 feierte Erzbischof Dr. Heiner Koch mit den Gemeinden die Gründung in einer feierlichen Hl. Messe in der katholischen Marienschule. Anwesende Gäste waren Bürgermeister Martin Hikel, Christian Nottmeier, der Superintendent des evangelischen Kirchenkreises Neukölln und vielen Akteuren aus Kiez und Ökumene. Die Vielfalt der Glaubenswege in unserer Pfarrei sehen wir als Schatz. Wie die drei Weisen aus dem Morgenland wollen wir uns immer wieder neu auf den Weg machen.'}
        image={forest}
      />}

      <ContentWithSlider slider={<>
        <Title title={'Akutelle Highlights'} size={'md'} fontStyle={'sans-serif'} color={'white'} />
        {highlights.map(highlight => (
          <EventRow
            color={'white'}
            key={highlight.id}
            date={highlight.date}
            title={highlight.text}
            href={highlightLink(highlight)}
            cancelled={false}
          />
        ))}
      </>}>
        <Section>
          <Title
            color={schema}
            title={'Veranstaltungen'}
          />
          <Events events={transformEvents(events)} n={6} />
        </Section>
      </ContentWithSlider>

      <ContactSection
        title={'Kontakt'}
        description={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec molestie ligula. Maecenas sollicitudin molestie velit id ultricies. Nulla luctus eleifend est, et hendrerit nunc pretium in. Nullam leo tortor, tincidunt in sodales dapibus, faucibus vel lacus. Nunc ornare lacus eu dui consequat, fermentum tincidunt felis blandit. Vivamus a turpis eros. Donec faucibus mi in magna cursus maximus. Duis ac elit posuere, bibendum nunc vel, consectetur neque. Aliquam non bibendum quam. Nulla facilisi. Vivamus eu iaculis felis. Donec elit augue, pretium eget pretium ullamcorper, vestibulum eu lorem. Praesent gravida condimentum tortor, in dignissim mauris elementum quis. Morbi a venenatis odio. Vivamus quis magna eget elit pellentesque elementum. Nulla facilisi.'}
        schema={schema}
      />
    </>

  )
}

export default Home;