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

import { useRoomFilteringStore } from "@/stores/select-rate/room-filtering"

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({
  roomCategories,
  availablePackages,
  selectedPackages,
  hotelType,
  defaultPackages,
  roomListIndex,
}: RoomSelectionPanelProps) {
  const searchParams = useSearchParams()
  const { getRooms } = useRoomFilteringStore()

  const rooms = getRooms(roomListIndex)

  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 ?? 0}
        filterOptions={defaultPackages}
        initialFilterValues={initialFilterValues}
        roomListIndex={roomListIndex}
      />
      {rooms && (
        <RoomTypeList
          roomsAvailability={rooms}
          roomCategories={roomCategories}
          availablePackages={availablePackages}
          selectedPackages={selectedPackages}
          hotelType={hotelType}
          roomListIndex={roomListIndex}
        />
      )}
    </>
  )
}