import styles from "./styles.module.scss"
import { ImageWithText } from '@/compositions/ImageWithText/ImageWithText'
import { fetchGroup } from '@/fetch/group'
import { notFound } from 'next/navigation'
import { Section } from '@/components/Section/Section'
import { Title } from '@/components/Title/Title'
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 { Blocks } from '@/compositions/Blocks/Blocks'
import { getPhoto } from '@/utils/dto/gallery'
import { isAuthenticated } from '@/utils/auth'
import { AdminMenu } from '@/components/AdminMenu/AdminMenu'
import { GroupEvents } from '@/compositions/GroupEvents/GroupEvents'
import { RichText } from '@/components/Text/RichText'
import { RefreshRouteOnSave } from '@/components/RefreshRouteOnSave/RefreshRouteOnSave'
import { draftMode } from 'next/headers'

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

  const slug = (await params).slug
  const { isEnabled: isDraft } = await draftMode()
  const group = await fetchGroup(slug, isDraft)

  if(!group) {
    notFound();
  }

  const authenticated = await isAuthenticated();

  if(!authenticated && group._status !== "published") {
    notFound();
  }

  const {id, shortDescription, photo, name, content, text } = group
  const media = getPhoto("tablet", photo)

  return (
    <>
      {isDraft && <RefreshRouteOnSave />}

      { 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 paddingBottom={"small"}>
          <Container>
            <Row>
              <Col>
                <div className={styles.content}>
                  { text &&
                    <RichText data={text} />
                  }
                </div>
              </Col>
              <Col>
                <GroupEvents id={id} />
              </Col>
            </Row>
          </Container>
        </Section>

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

      { content && content.length == 0 &&
        <Section padding={"medium"}></Section>
      }

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