web/components/GuestsRoomsPicker/Form.tsx

"use client"

import { useCallback, useEffect } from "react"
import { useFormContext, useWatch } from "react-hook-form"
import { useIntl } from "react-intl"

import { env } from "@/env/client"

import { CloseLargeIcon, PlusCircleIcon, PlusIcon } from "../Icons"
import Button from "../TempDesignSystem/Button"
import { Tooltip } from "../TempDesignSystem/Tooltip"
import { GuestsRoom } from "./GuestsRoom"

import styles from "./guests-rooms-picker.module.css"

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

const MAX_ROOMS = 4

interface GuestsRoomsPickerDialogProps {
  rooms: TGuestsRoom[]
  onClose: () => void
  isOverflowed?: boolean // ToDo Remove once Tooltip below is no longer required
}

export default function GuestsRoomsPickerDialog({
  rooms,
  onClose,
  isOverflowed = false,
}: GuestsRoomsPickerDialogProps) {
  const intl = useIntl()
  const { getFieldState, trigger, setValue } =
    useFormContext<BookingWidgetSchema>()
  const roomsValue = useWatch<BookingWidgetSchema, "rooms">({ name: "rooms" })
  const addRoomLabel = intl.formatMessage({ id: "Add room" })
  const doneLabel = intl.formatMessage({ id: "Done" })
  const disabledBookingOptionsHeader = intl.formatMessage({
    id: "We're sorry",
  })
  const disabledBookingOptionsText = intl.formatMessage({
    id: "Adding room is not available on the new website yet.",
  })

  const handleClose = useCallback(async () => {
    const isValid = await trigger("rooms")
    if (isValid) onClose()
  }, [trigger, onClose])

  const handleAddRoom = useCallback(() => {
    setValue("rooms", [...roomsValue, { adults: 1, childrenInRoom: [] }], {
      shouldValidate: true,
    })
  }, [roomsValue, setValue])

  const handleRemoveRoom = useCallback(
    (index: number) => {
      setValue(
        "rooms",
        roomsValue.filter((_, i) => i !== index),
        { shouldValidate: true }
      )
    },
    [roomsValue, setValue]
  )

  // Validate rooms when they change
  useEffect(() => {
    const fieldState = getFieldState("rooms")
    if (fieldState.invalid) trigger("rooms")
  }, [roomsValue, getFieldState, trigger])

  const isInvalid =
    getFieldState("rooms").invalid ||
    roomsValue.some((room) =>
      room.childrenInRoom.some((child) => child.age === undefined)
    )
  const canAddRooms = rooms.length < MAX_ROOMS

  return (
    <>
      <section className={styles.contentWrapper}>
        <header className={styles.header}>
          <button type="button" className={styles.close} onClick={onClose}>
            <CloseLargeIcon />
          </button>
        </header>

        <div className={styles.contentContainer}>
          {rooms.map((room, index) => (
            <GuestsRoom
              key={index}
              room={room}
              index={index}
              onRemove={handleRemoveRoom}
            />
          ))}

          {env.NEXT_PUBLIC_HIDE_FOR_NEXT_RELEASE ? (
            <div className={styles.addRoomMobileContainer}>
              <Tooltip
                heading={disabledBookingOptionsHeader}
                text={disabledBookingOptionsText}
                position="bottom"
                arrow="left"
              >
                <Button
                  intent="text"
                  variant="icon"
                  wrapping
                  theme="base"
                  fullWidth
                  onPress={handleAddRoom}
                  disabled
                >
                  <PlusIcon />
                  {addRoomLabel}
                </Button>
              </Tooltip>
            </div>
          ) : (
            canAddRooms && (
              <div className={styles.addRoomMobileContainer}>
                <Button
                  intent="text"
                  variant="icon"
                  wrapping
                  theme="base"
                  fullWidth
                  onPress={handleAddRoom}
                >
                  <PlusIcon />
                  {addRoomLabel}
                </Button>
              </div>
            )
          )}
        </div>
      </section>
      <footer className={styles.footer}>
        {env.NEXT_PUBLIC_HIDE_FOR_NEXT_RELEASE ? (
          <div className={styles.hideOnMobile}>
            <Tooltip
              heading={disabledBookingOptionsHeader}
              text={disabledBookingOptionsText}
              position={isOverflowed ? "top" : "bottom"}
              arrow="left"
            >
              <Button
                intent="text"
                variant="icon"
                wrapping
                theme="base"
                disabled
                onPress={handleAddRoom}
              >
                <PlusCircleIcon />
                {addRoomLabel}
              </Button>
            </Tooltip>
          </div>
        ) : (
          canAddRooms && (
            <div className={styles.hideOnMobile}>
              <Button
                intent="text"
                variant="icon"
                wrapping
                theme="base"
                onPress={handleAddRoom}
              >
                <PlusCircleIcon />
                {addRoomLabel}
              </Button>
            </div>
          )
        )}
        <Button
          onPress={handleClose}
          disabled={isInvalid}
          className={styles.hideOnDesktop}
          intent="tertiary"
          theme="base"
          size="large"
        >
          {doneLabel}
        </Button>
        <Button
          onPress={handleClose}
          disabled={isInvalid}
          className={styles.hideOnMobile}
          intent="tertiary"
          theme="base"
          size="small"
        >
          {doneLabel}
        </Button>
      </footer>
    </>
  )
}