import { useIntl } from "react-intl"

import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

import AdultSelector from "./AdultSelector"
import ChildSelector from "./ChildSelector"

import styles from "./guests-room-picker.module.css"

import {
  Child,
  GuestsRoom,
  GuestsRoomPickerProps,
} from "@/types/components/bookingWidget/guestsRoomsPicker"

export default function GuestsRoomPicker({
  handleOnSelect = (selected: GuestsRoom, index: number) => {},
  room = { adults: 1, children: [] },
  index = 1,
  isValid,
}: GuestsRoomPickerProps) {
  const intl = useIntl()
  const roomLabel = intl.formatMessage({ id: "Room" })

  function updateAdults(count: number) {
    room.adults = count
    handleOnSelect(room, index)
  }

  function updateChildren(children: Child[]) {
    room.children = children
    handleOnSelect(room, index)
  }

  return (
    <section className={styles.container}>
      <Subtitle>
        {roomLabel} {index + 1}
      </Subtitle>
      <AdultSelector adults={room.adults} updateAdults={updateAdults} />
      <ChildSelector
        roomChildren={room.children}
        adultCount={room.adults}
        updateChildren={updateChildren}
        isValid={isValid}
      />
    </section>
  )
}