"use client"

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

import Stepper from "@scandic-hotels/design-system/Stepper"
import { Typography } from "@scandic-hotels/design-system/Typography"

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

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

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

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

  return (
    <section className={styles.container}>
      <Typography
        variant="Body/Supporting text (caption)/smBold"
        className={styles.label}
      >
        <p>{adultsLabel}</p>
      </Typography>
      <Stepper
        count={currentAdults}
        handleOnDecrease={decreaseAdultsCount}
        handleOnIncrease={increaseAdultsCount}
        disableDecrease={currentAdults == 1}
        disableIncrease={currentAdults == 6}
      />
    </section>
  )
}