import { Section } from '@/components/Section/Section'
import { Container } from '@/components/Container/Container'
import { Title } from '@/components/Title/Title'
import { TextDiv } from '@/components/Text/TextDiv'
import { Blog } from '@/payload-types'
import { notFound } from 'next/navigation'
import { readableDateTime } from '@/utils/readableDate'
import { HR } from '@/components/HorizontalRule/HorizontalRule'
import Image from 'next/image'
import styles from "./styles.module.scss"
import { HTMLText } from '@/components/Text/HTMLText'
import { Button } from '@/components/Button/Button'
import { ContactSection } from '@/compositions/ContactSection/ContactSection'
import { Gallery } from '@/components/Gallery/Gallery'
import { transformGallery } from '@/utils/dto/gallery'

async function fetchBlog(id: string) {
  const res = await fetch(`http://localhost:3000/api/blog/${id}`)
  if (!res.ok) return undefined
  return res.json();
}

export default async function BlogPage({ params }: { params: Promise<{id: string}>}){

  const id = (await params).id;
  const data = await fetchBlog(id) as Blog;
  const url = typeof data.photo === 'object' && data.photo?.sizes?.banner?.url;

  if(!data) {
    notFound();
  }

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

  return (
    <>
      <Section paddingBottom={"small"}>
        <Container>
          <Title title={data.title} color={"contrast"}></Title>
          <strong><TextDiv text={data.excerpt} /></strong>
          <p className={styles.published}>
            Publiziert am {readableDateTime(data.createdAt)}
          </p>
        </Container>
        <HR/>
        <Container>
          <div>
            { typeof url === "string" &&
              <Image className={styles.image} src={url} width={1100} height={400} alt={""} />
            }
          </div>
        </Container>
      </Section>

        <div>
          {data.content.map(item => {
            if (item.blockType === "text" && item.content_html) {
              return (
                <Container key={item.id}>
                  <HTMLText width={item.width} html={item.content_html} />
                </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"}>{item.button}</Button>
                  </Section>
                </Container>
              )
            }

            if (item.blockType === "contactform") {
              return (
                <ContactSection
                  key={item.id}
                  title={item.title}
                  description={item.description}
                  backgroundColor={"off-white"}
                />
              )
            }

            if (item.blockType === "gallery") {
              return (
                <Section key={item.id}>
                  <Gallery items={transformGallery(item.items)} />
                </Section>
              )
            }
          })}
        </div>

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