"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 ChildInfoSelector from "./ChildInfoSelector"

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

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

export default function ChildSelector({
  roomIndex = 0,
  currentAdults,
  childrenInAdultsBed,
  currentChildren,
}: SelectorProps) {
  const intl = useIntl()
  const childrenLabel = intl.formatMessage({ id: "Children" })
  const { setValue } = useFormContext()

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

  return (
    <>
      <section className={styles.container}>
        <Caption color="uiTextHighContrast" type="bold">
          {childrenLabel}
        </Caption>
        <Counter
          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}
        />
      ))}
    </>
  )
}