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

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

import { useRoomContext } from "@/contexts/SelectRate/Room"

import BookingCodeFilter from "../BookingCodeFilter"
import RoomPackageFilter from "../RoomPackageFilter"

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

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

export default function RoomsHeader() {
  const { rooms, totalRooms } = useRoomContext()
  const intl = useIntl()

  const availableRooms = rooms.filter(
    (room) => room.status === AvailabilityEnum.Available
  ).length

  const notAllRoomsAvailableText = intl.formatMessage(
    {
      id: "{availableRooms}/{numberOfRooms, plural, one {# room type} other {# room types}} available",
    },
    {
      availableRooms,
      numberOfRooms: totalRooms,
    }
  )

  const allRoomsAvailableText = intl.formatMessage(
    {
      id: "{numberOfRooms, plural, one {# room type} other {# room types}} available",
    },
    {
      numberOfRooms: totalRooms,
    }
  )

  return (
    <div className={styles.container}>
      <Typography variant="Title/Subtitle/md" className={styles.availableRooms}>
        <p>
          {availableRooms !== totalRooms
            ? notAllRoomsAvailableText
            : allRoomsAvailableText}
        </p>
      </Typography>
      <div className={styles.filters}>
        <RoomPackageFilter />
        <BookingCodeFilter />
      </div>
    </div>
  )
}