"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>
  )
}