import { Parish } from '@/payload-types'
import { Container } from '@/components/Container/Container'
import { HTMLText } from '@/components/Text/HTMLText'
import { Section } from '@/components/Section/Section'
import { Button } from '@/components/Button/Button'
import { DonationForm } from '@/components/DonationForm/DonationForm'
import { YoutubePlayer } from '@/components/YoutubePlayer/YoutubePlayer'
import { DonationAppeal } from '@/components/DonationAppeal/DonationAppeal'
import { ImageCardsBlock } from '@/compositions/Blocks/ImageCardsBlock'
import { Title } from '@/components/Title/Title'
import { Collapsible } from '@/components/Collapsible/Collapsible'
import { NextPrevButtons } from '@/components/NextPrevButtons/NextPrevButtons'

type BlocksProps = {
  content: Parish['content']
}

export function ParishBlocks({ content }: BlocksProps) {

  if (!content) return null;

  // determine if some margin at the bottom should be added
  const length = content.length;
  const shouldAddMargin = content[length - 1].blockType === "text"

  return (
    <>
      <div>
        {content.map(item => {
          if (item.blockType === "text") {
            return (
              <Container key={item.id}>
                <HTMLText width={item.width} data={item.content} />
              </Container>
            );
          }

          if (item.blockType === "document" && typeof item.file === "object") {
            return (
              <Container key={item.id}>
                <Section padding={"medium"}>
                  <Button
                    size={"lg"}
                    href={item.file.url || "notfound"}
                    schema={"contrast"}
                    target={"_blank"}
                  >
                    {item.button}
                  </Button>
                </Section>
              </Container>
            )
          }

          if (item.blockType === "donation") {
            return <Section key={item.id} padding={"small"} paddingBottom={"large"}>
              <DonationForm />
            </Section>
          }

          if (item.blockType === "youtube") {
            return <Section key={item.id} padding={"small"}>
              <Container>
                <YoutubePlayer id={item.youtube_id} />
              </Container>
            </Section>
          }

          if (item.blockType === "imageCards") {
            return <ImageCardsBlock key={item.id} items={item.items} />
          }

          if (item.blockType === "title") {
            return (
              <Container key={item.id}>
                <Title
                  title={item.title}
                  subtitle={item.subtitle || undefined}
                  size={item.size as 'xl' | 'lg' | 'md' | 'sm' | undefined}
                  align={item.align as 'left' | 'center' | undefined}
                  color={item.color as 'base' | 'shade1' | 'shade2' | 'shade3' | 'contrast' | 'contrastShade1' | undefined}
                />
              </Container>
            )
          }

          if (item.blockType === "collapsibles") {
            return (
              <Section key={item.id} padding={"small"}>
                <Container>
                  {item.items.map(entry => (
                    <Collapsible key={entry.id} title={entry.title}>
                      <HTMLText width={"3/4"} data={entry.content} />
                    </Collapsible>
                  ))}
                </Container>
              </Section>
            )
          }

          if (item.blockType === "donationAppeal") {
            return <Section key={item.id} padding={"small"}>
              <Container>
                <DonationAppeal />
              </Container>
            </Section>
          }

          if (item.blockType === 'nextPrevButtons') {
            const prev = item.prev?.href && item.prev?.text
              ? { href: item.prev.href, text: item.prev.text }
              : undefined
            const next = item.next?.href && item.next?.text
              ? { href: item.next.href, text: item.next.text }
              : undefined
            return (
              <Section key={item.id} padding={'medium'} paddingBottom={'small'}>
                <NextPrevButtons prev={prev} next={next} />
              </Section>
            )
          }
        })}
      </div>



      { shouldAddMargin &&
        <Section></Section>
      }
    </>
  )
}