"use client"

import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"

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

import Counter from "../Counter"

import styles from "./adult-selector.module.css"

import type { SelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"

export default function AdultSelector({
  roomIndex = 0,
  currentAdults,
}: SelectorProps) {
  const name = `rooms.${roomIndex}.adults`
  const intl = useIntl()
  const adultsLabel = intl.formatMessage({ id: "Adults" })
  const { setValue } = useFormContext()

  function increaseAdultsCount() {
    if (currentAdults < 6) {
      setValue(name, currentAdults + 1)
    }
  }

  function decreaseAdultsCount() {
    if (currentAdults > 1) {
      setValue(name, currentAdults - 1)
    }
  }

  return (
    <section className={styles.container}>
      <Caption color="uiTextHighContrast" type="bold">
        {adultsLabel}
      </Caption>
      <Counter
        count={currentAdults}
        handleOnDecrease={decreaseAdultsCount}
        handleOnIncrease={increaseAdultsCount}
        disableDecrease={currentAdults == 1}
        disableIncrease={currentAdults == 6}
      />
    </section>
  )
}