import { Typography } from "@scandic-hotels/design-system/Typography"

import { getMeetingRooms } from "@/lib/trpc/memoizedRequests"

import { meetingPackageDestinationByHotelId } from "@/components/MeetingPackageWidget/utils"
import StickyMeetingPackageWidget from "@/components/StickyMeetingPackageWidget"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { safeTry } from "@/utils/safeTry"

import HeroHeader from "../HeroHeader"
import HtmlContent from "../HtmlContent"
import MeetingsSidebar from "../Sidebar/MeetingsSidebar"
import MeetingsAdditionalContent from "./MeetingRooms"

import styles from "./meetingsSubpage.module.css"

import type { AdditionalData, Hotel } from "@/types/hotel"

interface MeetingsSubpageProps {
  hotelId: string
  hotel: Hotel
  additionalData: AdditionalData
}

export default async function MeetingsSubpage({
  hotelId,
  hotel,
  additionalData,
}: MeetingsSubpageProps) {
  const intl = await getIntl()
  const lang = await getLang()
  const heading = intl.formatMessage({
    defaultMessage: "Meetings, Conferences & Events",
  })
  const mainBody = additionalData.meetingRooms.mainBody
  const elevatorPitch = hotel.hotelContent.texts.meetingDescription?.medium
  const heroImage = additionalData.conferencesAndMeetings?.heroImages[0]
  const [meetingRooms] = await safeTry(
    getMeetingRooms({ hotelId, language: lang })
  )
  const meetingPackageDestination = meetingPackageDestinationByHotelId[hotelId]

  return (
    <>
      <StickyMeetingPackageWidget destination={meetingPackageDestination} />
      <section className={styles.meetingsSubpage}>
        <HeroHeader breadcrumbsTitle={heading} heroImage={heroImage} />

        <div className={styles.contentContainer}>
          <Typography variant="Title/md">
            <h1 className={styles.heading}>{heading}</h1>
          </Typography>

          <aside className={styles.sidebar}>
            {meetingRooms ? (
              <MeetingsSidebar
                country={hotel.address.country}
                email={meetingRooms[0].attributes.email}
                phoneNumber={meetingRooms[0].attributes.phoneNumber}
              />
            ) : null}
          </aside>
          <Divider color="baseSurfaceSubtleHover" className={styles.divider} />
          <main className={styles.mainContent}>
            {elevatorPitch ? (
              <div className={styles.intro}>
                <Typography variant="Body/Lead text">
                  <p>{elevatorPitch}</p>
                </Typography>
              </div>
            ) : null}

            {mainBody ? <HtmlContent html={mainBody} /> : null}
          </main>
          {meetingRooms ? (
            <div className={styles.meetingsInformation}>
              <MeetingsAdditionalContent rooms={meetingRooms} />
            </div>
          ) : null}
        </div>
      </section>
    </>
  )
}
