import styles from "./styles.module.scss"
import { ContactPerson, Document, Location } from '@/payload-types'
import { Section } from '@/components/Section/Section'
import { Title } from '@/components/Title/Title'
import { Container } from '@/components/Container/Container'
import { Col } from '@/components/Flex/Col'
import { Pill } from '@/components/Pill/Pill'
import { HR } from '@/components/HorizontalRule/HorizontalRule'
import { useDate } from '@/hooks/useCompactDate'
import { readableDateTime } from '@/utils/readableDate'
import { TextDiv } from '@/components/Text/TextDiv'
import { EventExcerpt, EventExcerptRow } from '@/components/EventExcerpt/EventExcerpt'
import { Button } from '@/components/Button/Button'
import { StaticImageData } from 'next/image'
import { locationString } from '@/utils/dto/location'
import { ContactPerson2 } from '@/components/ContactPerson2/ContactPerson2'
import { getPhoto } from '@/utils/dto/gallery'

type EventProps = {
  title: string,
  date: string,
  createdAt: string,
  cancelled: boolean,
  isRecurring?: boolean,
  location: string | Location,
  description: string,
  shortDescription: string,
  contact?: string | ContactPerson,
  group?: string,
  flyer?: Document,
  photo?: StaticImageData,
  rsvpLink?: string
}

export function EventPage(
  {
    title,
    date,
    createdAt,
    cancelled,
    isRecurring,
    location,
    description,
    shortDescription,
    contact,
    flyer,
    group,
    photo,
    rsvpLink
  }: EventProps
) {
  const published = useDate(createdAt)
  const readableDate = readableDateTime(date)
  const where = locationString(location);
  const contactPersonPhoto = typeof contact === "object" ? getPhoto("thumbnail", contact.photo) : undefined;

  return (
    <>
      <Section paddingBottom={"small"}>
        <Container>
          <Title
            title={title}
            size={"xl"}
            color={"contrast"}
            cancelled={cancelled}
          />
        </Container>

          <div className={styles.header}>
            <div className={styles.headerText}>
              <p>
                Herzliche Einladungen an unseren kommenden Veranstaltungen und Events teilzunehmen.
              </p>
              <p className={styles.published}>
                Publiziert am {published}
              </p>

              <div className={styles.pills}>
                { isRecurring &&
                  <Pill>Regelmäßig</Pill>
                }
                { cancelled &&
                  <Pill schema={"contrast"}>Abgesagt</Pill>
                }
              </div>
            </div>
            <Col>
              { photo &&
                <img
                  src={photo.src}
                  className={styles.photo}
                  alt={"Veranstaltungsbild"}
                />
              }

            </Col>
          </div>
        <HR />
      </Section>

      <Section padding={"medium"}>
        <Container>
          <Title
            size={"md"}
            title={`${title} - ${readableDate}`}
            fontStyle={"sans-serif"}
            align={"center"}
          />

          {typeof location === "object" &&
            <Title
              size={"md"}
              title={location.name}
              fontStyle={"sans-serif"}
              align={"center"}
            />
          }


          <Section padding={"medium"}>
            <div className={styles.description}>
              <TextDiv text={description} />

              { (typeof flyer === "object" || group || rsvpLink) &&
                <Section padding={"small"}>
                  <div className={styles.buttons}>
                    { rsvpLink &&
                      <Button size={"md"} href={rsvpLink} target={"_blank"} schema={"contrast"}>
                        Anmelden
                      </Button>
                    }

                    { typeof flyer === "object" && flyer.url &&
                      <Button size={"md"} href={flyer.url}>Flyer herunterladen</Button>
                    }

                    { group &&
                      <Button
                        size={"md"}
                        schema={"shade"}
                        href={`/gruppe/${group}`}
                      >Erfahre mehr zur Gruppe</Button>
                    }
                  </div>
                </Section>
              }
            </div>
          </Section>
        </Container>

        <EventExcerpt>
          <EventExcerptRow label={"Was:"}>
            <TextDiv text={shortDescription} />
          </EventExcerptRow>
          <EventExcerptRow label={"Wo:"}>
            <TextDiv text={where} />
          </EventExcerptRow>
          <EventExcerptRow label={"Ansprechperson:"}>
            <ContactPerson2
              contact={contact}
              photo={contactPersonPhoto}
            />
          </EventExcerptRow>
        </EventExcerpt>

      </Section>
      <Section/>
    </>
  )
}