"use client" import { useFormContext } from "react-hook-form" import { useIntl } from "react-intl" import { useGuestsRoomsStore } from "@/stores/guests-rooms" import { MinusIcon, PlusIcon } from "@/components/Icons" import Button from "@/components/TempDesignSystem/Button" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import ChildInfoSelector from "./ChildInfoSelector" import styles from "./child-selector.module.css" import { BookingWidgetSchema } from "@/types/components/bookingWidget" import { ChildSelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker" export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) { const intl = useIntl() const childrenLabel = intl.formatMessage({ id: "Children" }) const { setValue, trigger } = useFormContext() const children = useGuestsRoomsStore( (state) => state.rooms[roomIndex].children ) const increaseChildren = useGuestsRoomsStore.use.increaseChildren() const decreaseChildren = useGuestsRoomsStore.use.decreaseChildren() function increaseChildrenCount(roomIndex: number) { if (children.length < 5) { increaseChildren(roomIndex) setValue(`rooms.${roomIndex}.children.${children.length}`, { age: -1, bed: -1, }) trigger() } } function decreaseChildrenCount(roomIndex: number) { if (children.length > 0) { const newChildrenList = decreaseChildren(roomIndex) setValue(`rooms.${roomIndex}.children`, newChildrenList) trigger("rooms") } } return ( <>

{childrenLabel}

{children.length}

{children.map((child, index) => ( ))} ) }