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

"use client"

import { useCallback, useEffect, 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
  containerRef?: React.RefObject<HTMLDivElement | null>
  roomsDividerRef?: React.RefObject<HTMLDivElement | null>
}
export default function ChildSelector({
  roomIndex = 0,
  currentAdults,
  childrenInAdultsBed,
  currentChildren,
  containerRef,
}: ChildSelectorProps) {
  const intl = useIntl()
  const childRefs = useRef<(HTMLDivElement | null)[]>([])
  const previousChildCount = useRef(currentChildren.length)

  const childrenLabel = intl.formatMessage({
    id: "bookingwidget.dropdown.children",
    defaultMessage: "Children (0–12 years)",
  })
  const { setValue } = useFormContext()

  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,
      })
    }
  }
  const scrollToAgePicker = useCallback(() => {
    if (!containerRef?.current) return

    const lastChildIndex = currentChildren.length - 1
    const lastChild = childRefs.current[lastChildIndex]

    if (!lastChild) return

    const container = containerRef.current
    const containerRect = container.getBoundingClientRect()
    const targetRect = lastChild.getBoundingClientRect()

    const targetOffset =
      targetRect.top - containerRect.top + container.scrollTop
    const centerOffset = containerRect.height / 2 - targetRect.height / 2

    container.scrollTo({
      top: targetOffset - centerOffset,
      behavior: "smooth",
    })
  }, [containerRef, currentChildren.length])

  useEffect(() => {
    // Only scroll when a child was added
    if (currentChildren.length > previousChildCount.current) {
      scrollToAgePicker()
    }
    previousChildCount.current = currentChildren.length
  }, [currentChildren.length, scrollToAgePicker])

  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={() => {
            increaseChildrenCount(roomIndex)
          }}
          disableDecrease={currentChildren.length == 0}
          disableIncrease={currentChildren.length == 5}
        />
      </section>

      {currentChildren.map((child, index) => (
        <ChildInfoSelector
          roomIndex={roomIndex}
          index={index}
          child={child}
          adults={currentAdults}
          key={"child_" + index}
          childrenInAdultsBed={childrenInAdultsBed}
          scrollToRef={(el) => {
            childRefs.current[index] = el
          }}
        />
      ))}
    </>
  )
}