"use client"

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

import SelectionCard from "../SelectionCard"

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

import type { BedSelectionProps } from "@/types/components/hotelReservation/selectRate/section"

export default function BedSelection({
  alternatives,
  nextPath,
}: BedSelectionProps) {
  const intl = useIntl()
  const router = useRouter()
  const searchParams = useSearchParams()

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

  return (
    <div className={styles.wrapper}>
      <form
        method="GET"
        action={`${nextPath}?${searchParams}`}
        onSubmit={handleSubmit}
      >
        <ul className={styles.list}>
          {alternatives.map((alternative) => (
            <li key={alternative.value}>
              <label>
                <input type="radio" name="bed" value={alternative.value} />
                <SelectionCard
                  title={alternative.name}
                  subtext={`(${alternative.payment})`}
                  price={alternative.pricePerNight}
                  membersPrice={alternative.membersPricePerNight}
                  currency={alternative.currency}
                />
              </label>
            </li>
          ))}
        </ul>

        <button type="submit" hidden>
          {intl.formatMessage({ id: "Submit" })}
        </button>
      </form>
    </div>
  )
}