web/apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx

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

import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
import BookingCodeFilter from "@/components/HotelReservation/SelectHotel/BookingCodeFilter"
import HotelFilter from "@/components/HotelReservation/SelectHotel/Filters/HotelFilter"
import HotelCount from "@/components/HotelReservation/SelectHotel/HotelCount"
import HotelSorter from "@/components/HotelReservation/SelectHotel/HotelSorter"
import MobileMapButtonContainer from "@/components/HotelReservation/SelectHotel/MobileMapButtonContainer"
import NoAvailabilityAlert from "@/components/HotelReservation/SelectHotel/NoAvailabilityAlert"
import StaticMap from "@/components/Maps/StaticMap"
import Link from "@/components/TempDesignSystem/Link"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"

import { getFiltersFromHotels, type HotelResponse } from "./helpers"

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

import type { Location } from "@scandic-hotels/trpc/types/locations"

interface SelectHotelProps {
  isAlternative?: boolean
  bookingCode?: string
  city: Location
  hotels: HotelResponse[]
  isBookingCodeRateAvailable?: boolean
  mapHref: string
  title: string
}

export default async function SelectHotel({
  bookingCode,
  city,
  hotels,
  isAlternative = false,
  isBookingCodeRateAvailable = false,
  mapHref,
  title,
}: SelectHotelProps) {
  const intl = await getIntl()

  const isAllUnavailable = hotels.every(
    (hotel) => hotel.availability.status !== "Available"
  )
  const isCityWithCountry = (city: any): city is { country: string } =>
    "country" in city

  // Special rates (corporate cheque, voucher) will not have regular rate hotels availability
  const isSpecialRate = hotels.some(
    (hotel) =>
      hotel.availability.productType?.bonusCheque ||
      hotel.availability.productType?.voucher
  )

  const filterList = getFiltersFromHotels(hotels)

  const showBookingCodeFilter = isBookingCodeRateAvailable && !isSpecialRate

  return (
    <>
      <header className={styles.header}>
        <div className={styles.headerContent}>
          <div className={styles.title}>
            <div className={styles.cityInformation}>
              <Subtitle>{title}</Subtitle>
              <HotelCount />
            </div>
            <div className={styles.sorter}>
              <HotelSorter discreet />
            </div>
          </div>
          <MobileMapButtonContainer filters={filterList} />
        </div>
      </header>
      <main className={styles.main}>
        {showBookingCodeFilter ? <BookingCodeFilter /> : null}
        <div className={styles.sideBar}>
          {hotels.length ? (
            <Link className={styles.link} href={mapHref} keepSearchParams>
              <div className={styles.mapContainer}>
                <StaticMap
                  city={city.name}
                  country={isCityWithCountry(city) ? city.country : undefined}
                  width={340}
                  height={200}
                  zoomLevel={11}
                  mapType="roadmap"
                  altText={`Map of ${city.name} city center`}
                />
                <Typography variant="Body/Supporting text (caption)/smBold">
                  <span className={styles.mapButton}>
                    <MaterialIcon icon="map" color="CurrentColor" size={20} />
                    {intl.formatMessage({
                      defaultMessage: "See on map",
                    })}
                  </span>
                </Typography>
              </div>
            </Link>
          ) : (
            <div className={styles.mapContainer}>
              <StaticMap
                city={city.name}
                width={340}
                height={200}
                zoomLevel={11}
                mapType="roadmap"
                altText={`Map of ${city.name} city center`}
              />
            </div>
          )}
          <HotelFilter filters={filterList} className={styles.filter} />
        </div>
        <div className={styles.hotelList}>
          <NoAvailabilityAlert
            hotelsLength={hotels.length}
            isAlternative={isAlternative}
            isAllUnavailable={isAllUnavailable}
            operaId={hotels?.[0]?.hotel.operaId}
            bookingCode={bookingCode}
            isBookingCodeRateNotAvailable={!isBookingCodeRateAvailable}
          />
          <HotelCardListing hotelData={hotels} isAlternative={isAlternative} />
        </div>
      </main>
    </>
  )
}