web/components/HotelReservation/SelectHotel/index.tsx

import {
  selectHotel,
  selectHotelMap,
} from "@/constants/routes/hotelReservation"

import {
  fetchAvailableHotels,
  getFiltersFromHotels,
} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
import { ChevronRightIcon } from "@/components/Icons"
import StaticMap from "@/components/Maps/StaticMap"
import Alert from "@/components/TempDesignSystem/Alert"
import Breadcrumbs from "@/components/TempDesignSystem/Breadcrumbs"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"

import HotelCardListing from "../HotelCardListing"
import HotelCount from "./HotelCount"
import HotelFilter from "./HotelFilter"
import HotelSorter from "./HotelSorter"
import MobileMapButtonContainer from "./MobileMapButtonContainer"

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

import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
import type { SelectHotelProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
import { AlertTypeEnum } from "@/types/enums/alert"

export default async function SelectHotel({
  city,
  params,
  reservationParams,
}: SelectHotelProps) {
  const { selectHotelParams, searchParams, adultsParams, childrenParams } =
    reservationParams

  const intl = await getIntl()

  const hotels = await fetchAvailableHotels({
    cityId: city.id,
    roomStayStartDate: searchParams.fromDate,
    roomStayEndDate: searchParams.toDate,
    adults: adultsParams,
    children: childrenParams?.toString(),
  })

  const isCityWithCountry = (city: any): city is { country: string } =>
    "country" in city

  const validHotels = hotels.filter(
    (hotel): hotel is HotelData => hotel !== null
  )

  const filterList = getFiltersFromHotels(validHotels)
  const breadcrumbs = [
    {
      title: intl.formatMessage({ id: "Home" }),
      href: `/${params.lang}`,
      uid: "home-page",
    },
    {
      title: intl.formatMessage({ id: "Hotel reservation" }),
      href: `/${params.lang}/hotelreservation`,
      uid: "hotel-reservation",
    },
    {
      title: intl.formatMessage({ id: "Select hotel" }),
      href: `${selectHotel(params.lang)}/?${selectHotelParams}`,
      uid: "select-hotel",
    },
    {
      title: city.name,
      uid: city.id,
    },
  ]

  const isAllUnavailable = hotels.every((hotel) => hotel.price === undefined)

  return (
    <>
      <header className={styles.header}>
        <Breadcrumbs breadcrumbs={breadcrumbs} />
        <div className={styles.title}>
          <div className={styles.cityInformation}>
            <Subtitle>{city.name}</Subtitle>
            <HotelCount />
          </div>
          <div className={styles.sorter}>
            <HotelSorter discreet />
          </div>
        </div>
        <MobileMapButtonContainer filters={filterList} />
      </header>
      <main className={styles.main}>
        <div className={styles.sideBar}>
          {hotels.length > 0 ? ( // TODO: Temp fix until API returns hotels that are not available
            <Link
              className={styles.link}
              color="burgundy"
              href={selectHotelMap(params.lang)}
              keepSearchParams
            >
              <div className={styles.mapContainer}>
                <StaticMap
                  city={searchParams.city}
                  country={isCityWithCountry(city) ? city.country : undefined}
                  width={340}
                  height={180}
                  zoomLevel={11}
                  mapType="roadmap"
                  altText={`Map of ${searchParams.city} city center`}
                />
                <Button wrapping size="medium" intent="text" theme="base">
                  {intl.formatMessage({ id: "See map" })}
                  <ChevronRightIcon
                    color="baseButtonTextOnFillNormal"
                    width={20}
                    height={20}
                  />
                </Button>
              </div>
            </Link>
          ) : (
            <div className={styles.mapContainer}>
              <StaticMap
                city={searchParams.city}
                width={340}
                height={180}
                zoomLevel={11}
                mapType="roadmap"
                altText={`Map of ${searchParams.city} city center`}
              />
            </div>
          )}
          <HotelFilter filters={filterList} className={styles.filter} />
        </div>
        <div className={styles.hotelList}>
          {isAllUnavailable && (
            <Alert
              type={AlertTypeEnum.Info}
              heading={intl.formatMessage({ id: "No availability" })}
              text={intl.formatMessage({
                id: "There are no rooms available that match your request.",
              })}
            />
          )}
          <HotelCardListing hotelData={validHotels} />
        </div>
      </main>
    </>
  )
}