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

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

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

import { RemoveBookingCodeButton } from "./RemoveBookingCodeButton/RemoveBookingCodeButton"
import RoomPackageFilter from "./RoomPackageFilter"

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

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

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

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

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

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

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