90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
"use client"
|
|
import { useState } from "react"
|
|
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import Button from "../TempDesignSystem/Button"
|
|
import Divider from "../TempDesignSystem/Divider"
|
|
import GuestsRoomPicker from "./GuestsRoomPicker"
|
|
|
|
import styles from "./guests-rooms-picker.module.css"
|
|
|
|
import {
|
|
GuestsRoom,
|
|
GuestsRoomsPickerProps,
|
|
} from "@/types/components/bookingWidget/guestsRoomsPicker"
|
|
|
|
export default function GuestsRoomsPicker({
|
|
handleOnSelect,
|
|
initialSelected = [
|
|
{
|
|
adults: 1,
|
|
children: [],
|
|
},
|
|
],
|
|
closePicker,
|
|
}: GuestsRoomsPickerProps) {
|
|
const lang = useLang()
|
|
const [selectedGuests, setSelectedGuests] =
|
|
useState<GuestsRoom[]>(initialSelected)
|
|
|
|
function handleSelectRoomGuests(
|
|
selectedGuestsRoom: GuestsRoom,
|
|
index: number
|
|
) {
|
|
let updatedSelectedGuests = JSON.parse(JSON.stringify(selectedGuests))
|
|
updatedSelectedGuests[index] = selectedGuestsRoom
|
|
handleOnSelect(updatedSelectedGuests)
|
|
setSelectedGuests(updatedSelectedGuests)
|
|
}
|
|
|
|
function addRoom() {
|
|
if (selectedGuests.length < 4) {
|
|
let updatedSelectedGuests = JSON.parse(JSON.stringify(selectedGuests))
|
|
updatedSelectedGuests.push({
|
|
adults: 1,
|
|
children: [],
|
|
})
|
|
setSelectedGuests(updatedSelectedGuests)
|
|
handleOnSelect(updatedSelectedGuests)
|
|
}
|
|
}
|
|
|
|
function removeRoom(index: number) {
|
|
if (selectedGuests.length > 1) {
|
|
let updatedSelectedGuests = JSON.parse(JSON.stringify(selectedGuests))
|
|
updatedSelectedGuests.splice(index, 1)
|
|
setSelectedGuests(updatedSelectedGuests)
|
|
handleOnSelect(updatedSelectedGuests)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{selectedGuests.map((room, index) => (
|
|
<section key={index}>
|
|
<GuestsRoomPicker
|
|
room={room}
|
|
handleOnSelect={handleSelectRoomGuests}
|
|
index={index}
|
|
/>
|
|
<Divider></Divider>
|
|
{index > 0 ? (
|
|
<Button intent="text" onClick={() => removeRoom(index)}>
|
|
Remove Room
|
|
</Button>
|
|
) : null}
|
|
</section>
|
|
))}
|
|
<div className={styles.footer}>
|
|
{selectedGuests.length < 4 ? (
|
|
<Button intent="text" onClick={addRoom}>
|
|
Add Room
|
|
</Button>
|
|
) : null}
|
|
<Button onClick={closePicker}>Done</Button>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|