"use client"
import { useRouter, useSearchParams } from "next/navigation"
import { useIntl } from "react-intl"

import Button from "@/components/TempDesignSystem/Button"

import RoomCard from "./RoomCard"

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

import { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/roomSelection"

export default function RoomSelection({
  roomConfigurations,
}: RoomSelectionProps) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const intl = useIntl()

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const queryParams = new URLSearchParams(searchParams)
    queryParams.set("roomClass", e.currentTarget.roomClass?.value)
    queryParams.set("flexibility", e.currentTarget.flexibility?.value)
    router.push(`select-bed?${queryParams}`)
  }

  return (
    <div className={styles.wrapper}>
      <form
        method="GET"
        action={`select-bed?${searchParams}`}
        onSubmit={handleSubmit}
      >
        <ul className={styles.roomList}>
          {roomConfigurations.roomConfigurations.map((roomConfiguration) => (
            <li key={roomConfiguration.roomType}>
              <RoomCard
                rateDefinitions={roomConfigurations.rateDefinitions}
                roomConfiguration={roomConfiguration}
              />
            </li>
          ))}
        </ul>
        <div className={styles.summary}>
          This is summary
          <Button type="submit" size="small" theme="primaryDark">
            {intl.formatMessage({ id: "Choose room" })}
          </Button>
        </div>
      </form>
    </div>
  )
}