Files
web/components/HotelReservation/SelectRate/Rooms/index.tsx

77 lines
2.1 KiB
TypeScript

"use client"
import { useCallback, useState } from "react"
import { RoomsAvailability } from "@/server/routers/hotels/output"
import RoomFilter from "../RoomFilter"
import RoomSelection from "../RoomSelection"
import styles from "./rooms.module.css"
import {
RoomPackageCodeEnum,
type RoomPackageCodes,
} from "@/types/components/hotelReservation/selectRate/roomFilter"
import type { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
export default function Rooms({
roomsAvailability,
roomCategories = [],
user,
packages,
}: Omit<RoomSelectionProps, "selectedPackages">) {
const defaultRooms = roomsAvailability.roomConfigurations
const [rooms, setRooms] = useState<RoomsAvailability>({
...roomsAvailability,
roomConfigurations: defaultRooms,
})
const [selectedPackages, setSelectedPackages] = useState<RoomPackageCodes[]>(
[]
)
const handleFilter = useCallback(
(filter: Record<RoomPackageCodeEnum, boolean | undefined>) => {
const filteredPackages = Object.keys(filter).filter(
(key) => filter[key as RoomPackageCodeEnum]
) as RoomPackageCodeEnum[]
setSelectedPackages(filteredPackages)
if (filteredPackages.length === 0) {
setRooms({
...roomsAvailability,
roomConfigurations: defaultRooms,
})
return
}
const filteredRooms = roomsAvailability.roomConfigurations.filter(
(room) =>
filteredPackages.every((filteredPackage) =>
room.features.some((feature) => feature.code === filteredPackage)
)
)
setRooms({ ...roomsAvailability, roomConfigurations: filteredRooms })
},
[roomsAvailability, defaultRooms]
)
return (
<div className={styles.content}>
<RoomFilter
numberOfRooms={rooms.roomConfigurations.length}
onFilter={handleFilter}
filterOptions={packages}
/>
<RoomSelection
roomsAvailability={rooms}
roomCategories={roomCategories}
user={user}
packages={packages}
selectedPackages={selectedPackages}
/>
</div>
)
}