"use client"
import { useIntl } from "react-intl"

import { alternativeHotels } from "@/constants/routes/hotelReservation"

import Alert from "@/components/TempDesignSystem/Alert"
import { useRoomContext } from "@/contexts/Room"
import useLang from "@/hooks/useLang"

import RoomCard from "./RoomCard"
import RoomTypeFilter from "./RoomTypeFilter"

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

import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
import { AlertTypeEnum } from "@/types/enums/alert"

export default function RoomSelectionPanel() {
  const { rooms } = useRoomContext()
  const intl = useIntl()
  const lang = useLang()
  const noAvailableRooms = rooms.every(
    (roomConfig) => roomConfig.status === AvailabilityEnum.NotAvailable
  )
  return (
    <>
      {noAvailableRooms ? (
        <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>
      ) : null}
      <RoomTypeFilter />
      <ul className={styles.roomList}>
        {rooms.map((roomConfiguration) => (
          <RoomCard
            key={roomConfiguration.roomTypeCode}
            roomConfiguration={roomConfiguration}
          />
        ))}
      </ul>
    </>
  )
}