web/components/HotelReservation/SelectRate/RoomSelectionPanel/index.tsx

import { useSearchParams } from "next/navigation"
import { useMemo } from "react"
import { useIntl } from "react-intl"

import { alternativeHotels } from "@/constants/routes/hotelReservation"
import { useRoomFilteringStore } from "@/stores/select-rate/room-filtering"

import Alert from "@/components/TempDesignSystem/Alert"
import useLang from "@/hooks/useLang"

import RoomTypeFilter from "../RoomTypeFilter"
import RoomTypeList from "../RoomTypeList"

import styles from "../Rooms/rooms.module.css"

import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
import type { FilterValues } from "@/types/components/hotelReservation/selectRate/roomFilter"
import type { RoomSelectionPanelProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
import { AlertTypeEnum } from "@/types/enums/alert"

export function RoomSelectionPanel({
  availablePackages,
  defaultPackages,
  hotelType,
  roomCategories,
  roomListIndex,
  selectedPackages,
}: RoomSelectionPanelProps) {
  const searchParams = useSearchParams()
  const intl = useIntl()
  const lang = useLang()

  const { getRooms } = useRoomFilteringStore()

  const rooms = getRooms(roomListIndex)

  const initialFilterValues = useMemo(() => {
    const packagesFromSearchParams =
      searchParams.get(`room[${roomListIndex}].packages`)?.split(",") ?? []

    return defaultPackages.reduce<FilterValues>((acc, option) => {
      acc[option.code] = packagesFromSearchParams.includes(option.code)
      return acc
    }, {})
  }, [defaultPackages, searchParams, roomListIndex])

  return (
    <>
      {rooms?.roomConfigurations.every(
        (roomConfig) => roomConfig.status === AvailabilityEnum.NotAvailable
      ) && (
        <div className={styles.hotelAlert}>
          <Alert
            type={AlertTypeEnum.Info}
            heading={intl.formatMessage({ id: "No availability" })}
            text={intl.formatMessage({
              id: "There are no rooms available that match your request.",
            })}
            link={{
              title: intl.formatMessage({ id: "See alternative hotels" }),
              url: `${alternativeHotels(lang)}`,
              keepSearchParams: true,
            }}
          />
        </div>
      )}

      <RoomTypeFilter
        numberOfRooms={rooms?.roomConfigurations.length ?? 0}
        filterOptions={defaultPackages}
        initialFilterValues={initialFilterValues}
        roomListIndex={roomListIndex}
      />
      {rooms && (
        <RoomTypeList
          availablePackages={availablePackages}
          hotelType={hotelType}
          roomCategories={roomCategories}
          roomListIndex={roomListIndex}
          roomsAvailability={rooms}
          selectedPackages={selectedPackages}
        />
      )}
    </>
  )
}