Files
web/components/GuestsRoomsPicker/AdultSelector/index.tsx
2024-10-15 12:00:20 +02:00

76 lines
2.1 KiB
TypeScript

"use client"
import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import { guestsRoomsStore } from "@/stores/guests-rooms"
import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import styles from "./adult-selector.module.css"
import { BedTypeEnum } from "@/types/components/bookingWidget/enums"
import { AdultSelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) {
const intl = useIntl()
const adultsLabel = intl.formatMessage({ id: "Adults" })
const { setValue } = useFormContext()
const { adults, children } = guestsRoomsStore().rooms[roomIndex]
const { increaseAdults, decreaseAdults } = guestsRoomsStore()
function increaseAdultsCount(roomIndex: number) {
if (adults < 6) {
increaseAdults(roomIndex)
setValue(`rooms.${roomIndex}.adults`, adults + 1)
}
}
function decreaseAdultsCount(roomIndex: number) {
if (adults > 1) {
decreaseAdults(roomIndex)
setValue(`rooms.${roomIndex}.adults`, adults - 1)
let inAdultsBed = 0
let toUpdateIndex = -1
children.forEach((child, index) => {
if (child.bed == BedTypeEnum["In adults bed"]) {
inAdultsBed = inAdultsBed + 1
if (inAdultsBed > adults - 1) toUpdateIndex = index
}
})
if (toUpdateIndex != -1) {
setValue(
`rooms.${roomIndex}.children.${toUpdateIndex}.bed`,
children[toUpdateIndex].age < 3 ? 1 : 2
)
}
}
}
return (
<section className={styles.container}>
<Caption>{adultsLabel}</Caption>
<Button
onClick={() => {
decreaseAdultsCount(roomIndex)
}}
intent="text"
size="small"
>
-
</Button>
<span className={styles.textCenter}>{adults}</span>
<Button
onClick={() => {
increaseAdultsCount(roomIndex)
}}
intent="text"
size="small"
>
+
</Button>
</section>
)
}