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 forest from '@/assets/map.jpg'
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'
import { CollapsibleImageWithText } from '@/compositions/CollapsibleImageWithText/CollapsibleImageWithText'
import { MoreInformation } from '@/pageComponents/Home/MoreInformation'
import { Button } from '@/components/Button/Button'
import styles from "./styles.module.scss"

type HomeProps = {
  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 = ({
  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>
        {blog && blog.length > 0 &&
          <Section>
            <Title title={'Aktuelles'} color={"contrast"} />
            <ImageCardSlider slides={blogToSlides(blog)} />
          </Section>
        }
      </Container>

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

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

        <Section padding={'small'}>
          <div className={styles.center}>
            <Button
              href={"/gottesdienst"}
              size={"md"}
            >Alle Gottesdienste</Button>
          </div>
        </Section>

      </Section>

      <CollapsibleImageWithText
        backgroundColor={'soft'}
        title={'Über uns'}
        schema={"base"}
        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}
        content={<MoreInformation />}
      />

      <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}
            showDate={false}
            title={highlight.text}
            href={highlightLink(highlight)}
            cancelled={false}
          />
        ))}
      </>}>
        <Section>
          <Title
            color={"contrast"}
            title={'Veranstaltungen'}
          />
          <Events
            events={transformEvents(events)}
            n={6}
            schema={"contrast"}
          />
        </Section>
      </ContentWithSlider>

      <ContactSection
        title={'Kontakt'}
        description={'Haben Sie Fragen zum Glauben, den Sakramenten oder unseren Angeboten? Benötigen Sie Hilfe in einer schwierigen Situation oder möchten Sie einfach Ihre Gedanken mit uns teilen?\n' +
          '\n' +
          'Zögern Sie nicht, uns über das Kontaktformular zu schreiben.  Wir freuen uns über jede Nachricht und sind gerne für Sie da.'}
        schema={"base"}
      />
    </>

  )
}

export default Home;