import { useSearchParams } from "next/navigation"
import { useMemo } from "react"

import RoomTypeFilter from "../RoomTypeFilter"
import RoomTypeList from "../RoomTypeList"

import type { FilterValues } from "@/types/components/hotelReservation/selectRate/roomFilter"
import type { RoomSelectionPanelProps } from "@/types/components/hotelReservation/selectRate/roomSelection"

export function RoomSelectionPanel({
  rooms,
  roomCategories,
  availablePackages,
  selectedPackages,
  hotelType,
  handleFilter,
  defaultPackages,
  roomListIndex,
}: RoomSelectionPanelProps) {
  const searchParams = useSearchParams()

  const initialFilterValues = useMemo(() => {
    const packagesFromSearchParams =
      searchParams.get(`room[${roomListIndex}].packages`)?.split(",") ?? []

    return defaultPackages.reduce<FilterValues>((acc, option) => {
      acc[option.code] = packagesFromSearchParams.includes(option.code)
      return acc
    }, {})
  }, [defaultPackages, searchParams, roomListIndex])

  return (
    <>
      <RoomTypeFilter
        numberOfRooms={rooms.roomConfigurations.length}
        onFilter={handleFilter}
        filterOptions={defaultPackages}
        initialFilterValues={initialFilterValues}
      />
      <RoomTypeList
        roomsAvailability={rooms}
        roomCategories={roomCategories}
        availablePackages={availablePackages}
        selectedPackages={selectedPackages}
        hotelType={hotelType}
        roomListIndex={roomListIndex}
      />
    </>
  )
}