web/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/index.tsx

"use client"

import { useRef } from "react"
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 ChildInfoSelector from "./ChildInfoSelector"

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

import type { Child } from "@scandic-hotels/trpc/types/child"

type ChildSelectorProps = {
  roomIndex: number
  currentAdults: number
  currentChildren: Child[]
  childrenInAdultsBed: number
}
export default function ChildSelector({
  roomIndex = 0,
  currentAdults,
  childrenInAdultsBed,
  currentChildren,
}: ChildSelectorProps) {
  const intl = useIntl()
  const childrenLabel = intl.formatMessage({
    id: "bookingwidget.dropdown.children",
    defaultMessage: "Children (0–12 years)",
  })
  const { setValue } = useFormContext()
  const agePickerRef = useRef<HTMLDivElement | null>(null)

  function increaseChildrenCount(roomIndex: number) {
    if (currentChildren.length < 5) {
      setValue(
        `rooms.${roomIndex}.childrenInRoom.${currentChildren.length}`,
        {
          age: undefined,
          bed: undefined,
        },
        { shouldDirty: true }
      )
    }
  }
  function decreaseChildrenCount(roomIndex: number) {
    if (currentChildren.length > 0) {
      currentChildren.pop()
      setValue(`rooms.${roomIndex}.childrenInRoom`, currentChildren, {
        shouldDirty: true,
      })
    }
  }

  return (
    <>
      <section className={styles.container}>
        <Typography
          variant="Body/Supporting text (caption)/smBold"
          className={styles.label}
        >
          <p id="stepper-children-label">{childrenLabel}</p>
        </Typography>
        <Stepper
          label={childrenLabel}
          ariaLabelledBy="stepper-children-label"
          count={currentChildren.length}
          handleOnDecrease={() => {
            decreaseChildrenCount(roomIndex)
          }}
          handleOnIncrease={() => {
            requestAnimationFrame(() => {
              agePickerRef.current?.scrollIntoView({
                behavior: "smooth",
                block: "center",
              })
            })
            increaseChildrenCount(roomIndex)
          }}
          disableDecrease={currentChildren.length == 0}
          disableIncrease={currentChildren.length == 5}
        />
      </section>
      <span ref={agePickerRef} />
      {currentChildren.map((child, index) => (
        <ChildInfoSelector
          roomIndex={roomIndex}
          index={index}
          child={child}
          adults={currentAdults}
          key={"child_" + index}
          childrenInAdultsBed={childrenInAdultsBed}
        />
      ))}
    </>
  )
}