web/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Form.tsx

"use client"

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

import { Button } from "@scandic-hotels/design-system/Button"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"

import { useBookingFlowConfig } from "../../../bookingFlowConfig/bookingFlowConfigContext"
import { useIsDesktop } from "../../../hooks/useBreakpoint"
import { GuestsRoom } from "./GuestsRoom"

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

import type { GuestsRoom as TGuestsRoom } from ".."
import type { BookingWidgetSchema } from "../Client"

const MAX_ROOMS = 4

interface GuestsRoomsPickerDialogProps {
  rooms: TGuestsRoom[]
  onClose: () => void
  containerRef?: React.RefObject<HTMLDivElement | null>
}

export default function GuestsRoomsPickerDialog({
  rooms,
  onClose,
  containerRef,
}: GuestsRoomsPickerDialogProps) {
  const intl = useIntl()
  const isDesktop = useIsDesktop()
  const config = useBookingFlowConfig()
  const { getFieldState, trigger, setValue, getValues } =
    useFormContext<BookingWidgetSchema>()
  const roomsValue = useWatch<BookingWidgetSchema, "rooms">({ name: "rooms" })
  const addRoomLabel = intl.formatMessage({
    id: "bookingWidget.roomsPicker.addRoom",
    defaultMessage: "Add room",
  })
  const doneLabel = intl.formatMessage({
    id: "bookingWidget.roomsPicker.done",
    defaultMessage: "Done",
  })
  // Disable add room if booking code is either voucher or corporate cheque, or reward night is enabled
  const addRoomDisabledTextForSpecialRate = getValues(SEARCH_TYPE_REDEMPTION)
    ? config.variant === "partner-sas"
      ? intl.formatMessage({
          id: "partnerSas.bookingWidget.roomsPicker.disabled",
          defaultMessage:
            "Multi-room booking is not available with EuroBonus points.",
        })
      : intl.formatMessage({
          id: "error.multiroomRewardNightUnavailable",
          defaultMessage:
            "Multi-room booking is not available with reward night.",
        })
    : getValues("bookingCode.value")?.toLowerCase().startsWith("vo") &&
      intl.formatMessage({
        id: "error.multiroomBookingCodeUnavailable",
        defaultMessage:
          "Multi-room booking is not available with this booking code.",
      })
  const isInvalid =
    getFieldState("rooms").invalid ||
    roomsValue.some((room) =>
      room.childrenInRoom.some((child) => child.age === undefined)
    )

  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,
      shouldDirty: true,
    })
  }, [roomsValue, setValue])

  const handleRemoveRoom = useCallback(
    (index: number) => {
      const updatedRooms = roomsValue.filter((_, i) => i !== index)

      setValue("rooms", updatedRooms, {
        shouldValidate: true,
        shouldDirty: true,
      })

      if (updatedRooms.length === 1) {
        trigger("bookingCode.value")
        trigger(SEARCH_TYPE_REDEMPTION)
      }
    },
    [roomsValue, trigger, setValue]
  )

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

  const canAddRooms = rooms.length < MAX_ROOMS

  const addRoomButtonDisabled =
    !!addRoomDisabledTextForSpecialRate || !canAddRooms

  return (
    <>
      <section className={styles.contentWrapper}>
        <header className={styles.header}>
          <IconButton
            className={styles.close}
            variant="Muted"
            emphasis
            aria-label={intl.formatMessage({
              id: "common.close",
              defaultMessage: "Close",
            })}
            onPress={onClose}
            iconName="close"
          />
        </header>

        <div className={styles.contentContainer}>
          {rooms.map((room, index) => (
            <GuestsRoom
              key={index}
              room={room}
              index={index}
              onRemove={handleRemoveRoom}
              containerRef={containerRef}
            />
          ))}
          {!isDesktop && (
            <>
              <div className={styles.addRoomBtnContainer}>
                <Button
                  className={styles.addRoomBtn}
                  variant="Text"
                  wrapping
                  color="Primary"
                  onPress={handleAddRoom}
                  isDisabled={addRoomButtonDisabled}
                  size="sm"
                >
                  <MaterialIcon icon="add" color="CurrentColor" />
                  {addRoomLabel}
                </Button>
              </div>

              {addRoomDisabledTextForSpecialRate && (
                <div className={styles.errorContainer}>
                  <Typography
                    className={styles.error}
                    variant="Body/Supporting text (caption)/smRegular"
                  >
                    <span>
                      <MaterialIcon
                        icon="error"
                        size={20}
                        color="Icon/Feedback/Error"
                        isFilled
                      />
                      {addRoomDisabledTextForSpecialRate}
                    </span>
                  </Typography>
                </div>
              )}
            </>
          )}
        </div>
      </section>
      <footer className={styles.footer}>
        <div className={styles.footerButtons}>
          {isDesktop && (
            <Button
              variant="Text"
              wrapping
              color="Primary"
              isDisabled={addRoomButtonDisabled}
              size="sm"
              onPress={handleAddRoom}
            >
              <MaterialIcon icon="add_circle" color="CurrentColor" />
              {addRoomLabel}
            </Button>
          )}
          <Button
            onPress={handleClose}
            isDisabled={isInvalid}
            className={styles.doneButton}
            variant="Tertiary"
            color="Primary"
            size={isDesktop ? "sm" : "md"}
          >
            {doneLabel}
          </Button>
        </div>

        {/* DESKTOP INLINE ERROR MESSAGE */}
        {addRoomDisabledTextForSpecialRate && isDesktop && (
          <Typography
            className={styles.error}
            variant="Body/Supporting text (caption)/smRegular"
          >
            <div className={styles.errorContainer}>
              <MaterialIcon
                icon="error"
                size={20}
                color="Icon/Feedback/Error"
                isFilled
              />
              {addRoomDisabledTextForSpecialRate}
            </div>
          </Typography>
        )}
      </footer>
    </>
  )
}