import styles from "./styles.module.scss"
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'
import { Col } from '@/components/Flex/Col'
import { Row } from '@/components/Flex/Row'
import { RawHTML } from '@/components/RawHTML/RawHTML'
import { Blocks } from '@/compositions/Blocks/Blocks'
import { getPhoto } from '@/utils/dto/gallery'
import { isAuthenticated } from '@/utils/auth'
import { AdminMenu } from '@/components/AdminMenu/AdminMenu'

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, shortDescription, photo,name, text_html, content } = groups.docs[0]
  const media = getPhoto("tablet", photo)

  const events = await fetchEvents({groupId: id})
  const authenticated = await isAuthenticated();

  return (
    <>

      { media &&
        <ImageWithText
          title={name}
          backgroundColor={"soft"}
          text={shortDescription}
          image={media}
          schema={"contrast"}
        />
      }

      {typeof photo !== "object" &&

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

          <HR />
        </Section>

      }


        <Section>
          <Container>
            <Row>
              <Col>
                <div className={styles.content}>
                  { text_html &&
                    <RawHTML html={text_html} />
                  }
                </div>
              </Col>
              <Col>
                { events && events.docs.length > 0 &&
                <>
                  <Title
                    title={"Veranstaltungen"}
                    size={"md"}
                    color={"contrast"}
                  />
                  <Events
                    events={transformEvents(events.docs)}
                    n={3}
                    schema={"contrast"}
                  />
                </>
                }
              </Col>
            </Row>
          </Container>
        </Section>

      { content && content.length > 0 &&
        <Blocks content={content} />
      }

      <AdminMenu
        collection={"group"}
        id={id}
        isAuthenticated={authenticated}
      />
    </>
  )
}