import { ImageWithText } from '@/compositions/ImageWithText/ImageWithText'
import { fetchGroup } from '@/fetch/group'
import { notFound } from 'next/navigation'
import { fetchEvents } from '@/fetch/events'
import { Section } from '@/components/Section/Section'
import { Title } from '@/components/Title/Title'
import { Events } from '@/compositions/Events/Events'
import { transformEvents } from '@/utils/dto/events'
import { Container } from '@/components/Container/Container'
import { HR } from '@/components/HorizontalRule/HorizontalRule'
import { TextDiv } from '@/components/Text/TextDiv'

export default async function GroupPage({ params }: { params: Promise<{slug: string}>})  {

  const slug = (await params).slug
  const groups = await fetchGroup(slug)

  if(!groups || groups.docs.length === 0) {
    notFound();
  }

  const {id, description, photo,name } = groups.docs[0]
  const media = {
    src: typeof photo === "object" && photo ? photo.url || "" : "",
    width: typeof photo === "object" && photo ? photo.width || 0 : 0,
    height: typeof photo === "object" && photo ? photo.height || 0 : 0
  }

  const events = await fetchEvents(undefined, id)

  return (
    <>

      {typeof photo === "object" &&
        <ImageWithText
          title={name}
          backgroundColor={"soft"}
          text={description}
          image={media}
        />
      }

      {typeof photo !== "object" &&

        <Section paddingBottom={"medium"}>
          <Container>
            <Title title={name} />
            <strong>
              <TextDiv text={description} />
            </strong>
          </Container>

          <HR />
        </Section>

      }


      { events && events.docs.length > 0 &&
        <Section>
          <Container>
            <Title title={"Veranstaltungen"} size={"md"} />
            <Events events={transformEvents(events.docs)} n={3} />
          </Container>
          <Section></Section>
        </Section>
      }

    </>
  )
}