import hotelPageParams from "@/constants/routes/hotelPageParams"
import { env } from "@/env/server"
import { serverClient } from "@/lib/trpc/server"

import AccordionSection from "@/components/Blocks/Accordion"
import HotelReservationSidePeek from "@/components/HotelReservation/SidePeek"
import SidePeekProvider from "@/components/SidePeeks/SidePeekProvider"
import Alert from "@/components/TempDesignSystem/Alert"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { getRestaurantHeading } from "@/utils/facilityCards"

import DynamicMap from "./Map/DynamicMap"
import MapCard from "./Map/MapCard"
import MapWithCardWrapper from "./Map/MapWithCard"
import MobileMapToggle from "./Map/MobileMapToggle"
import StaticMap from "./Map/StaticMap"
import AmenitiesList from "./AmenitiesList"
import Facilities from "./Facilities"
import IntroSection from "./IntroSection"
import PreviewImages from "./PreviewImages"
import { Rooms } from "./Rooms"
import TabNavigation from "./TabNavigation"

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

import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"

export default async function HotelPage() {
  const intl = await getIntl()
  const lang = getLang()
  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
  const hotelData = await serverClient().hotel.get()
  if (!hotelData) {
    return null
  }

  const {
    hotelId,
    hotelName,
    hotelDescription,
    hotelLocation,
    hotelAddress,
    hotelRatings,
    hotelDetailedFacilities,
    hotelImages,
    roomCategories,
    activitiesCard,
    pointsOfInterest,
    facilities,
    faq,
    alerts,
  } = hotelData

  const topThreePois = pointsOfInterest.slice(0, 3)

  const coordinates = {
    lat: hotelLocation.latitude,
    lng: hotelLocation.longitude,
  }

  return (
    <div className={styles.pageContainer}>
      <div className={styles.hotelImages}>
        {hotelImages?.length && (
          <PreviewImages images={hotelImages} hotelName={hotelName} />
        )}
      </div>
      <TabNavigation
        restaurantTitle={getRestaurantHeading(hotelDetailedFacilities)}
        hasActivities={!!activitiesCard}
        hasFAQ={!!faq.accordions.length}
      />
      <main className={styles.mainSection}>
        <div id={HotelHashValues.overview} className={styles.overview}>
          <div className={styles.introContainer}>
            <IntroSection
              hotelName={hotelName}
              hotelDescription={hotelDescription}
              location={hotelLocation}
              address={hotelAddress}
              tripAdvisor={hotelRatings?.tripAdvisor}
            />

            <AmenitiesList detailedFacilities={hotelDetailedFacilities} />
          </div>
          {alerts.length ? (
            <div className={styles.alertsContainer}>
              {alerts.map((alert) => (
                <Alert
                  key={alert.id}
                  type={alert.type}
                  heading={alert.heading}
                  text={alert.text}
                />
              ))}
            </div>
          ) : null}
        </div>
        <Rooms hotelId={hotelId} rooms={roomCategories} />
        <Facilities facilities={facilities} activitiesCard={activitiesCard} />
        {faq.accordions.length > 0 && (
          <AccordionSection accordion={faq.accordions} title={faq.title} />
        )}
      </main>
      {googleMapsApiKey ? (
        <>
          <aside className={styles.mapContainer}>
            <MapWithCardWrapper>
              <StaticMap coordinates={coordinates} hotelName={hotelName} />
              <MapCard hotelName={hotelName} pois={topThreePois} />
            </MapWithCardWrapper>
          </aside>
          <MobileMapToggle />
          <DynamicMap
            apiKey={googleMapsApiKey}
            hotelName={hotelName}
            coordinates={coordinates}
            pointsOfInterest={pointsOfInterest}
            mapId={googleMapId}
          />
        </>
      ) : null}
      <SidePeekProvider>
        {/* eslint-disable import/no-named-as-default-member */}
        <SidePeek
          contentKey={hotelPageParams.amenities[lang]}
          title={intl.formatMessage({ id: "Amenities" })}
        >
          {/* TODO: Render amenities as per the design. */}
          Read more about the amenities here
        </SidePeek>
        <SidePeek
          contentKey={hotelPageParams.about[lang]}
          title={intl.formatMessage({ id: "Read more about the hotel" })}
        >
          Some additional information about the hotel
        </SidePeek>
        <SidePeek
          contentKey={hotelPageParams.restaurantAndBar[lang]}
          title={intl.formatMessage({ id: "Restaurant & Bar" })}
        >
          {/* TODO */}
          Restaurant & Bar
        </SidePeek>
        <SidePeek
          contentKey={hotelPageParams.wellnessAndExercise[lang]}
          title={intl.formatMessage({ id: "Wellness & Exercise" })}
        >
          {/* TODO */}
          Wellness & Exercise
        </SidePeek>
        <SidePeek
          contentKey={hotelPageParams.activities[lang]}
          title={intl.formatMessage({ id: "Activities" })}
        >
          {/* TODO */}
          Activities
        </SidePeek>
        <SidePeek
          contentKey={hotelPageParams.meetingsAndConferences[lang]}
          title={intl.formatMessage({ id: "Meetings & Conferences" })}
        >
          {/* TODO */}
          Meetings & Conferences
        </SidePeek>
        {/* eslint-enable import/no-named-as-default-member */}
      </SidePeekProvider>
      <HotelReservationSidePeek hotel={null} />
    </div>
  )
}
