web/components/GuestsRoomsPicker/Form.tsx

"use client"

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

import { CloseLargeIcon, PlusCircleIcon, PlusIcon } from "../Icons"
import Button from "../TempDesignSystem/Button"
import Divider from "../TempDesignSystem/Divider"
import Subtitle from "../TempDesignSystem/Text/Subtitle"
import { Tooltip } from "../TempDesignSystem/Tooltip"
import AdultSelector from "./AdultSelector"
import ChildSelector from "./ChildSelector"

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

import type { BookingWidgetSchema } from "@/types/components/bookingWidget"
import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
import type { GuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker"

export default function GuestsRoomsPickerDialog({
  rooms,
  onClose,
  isOverflowed = false,
}: {
  rooms: GuestsRoom[]
  onClose: () => void
  isOverflowed?: boolean // ToDo Remove once Tooltip below is no longer required
}) {
  const intl = useIntl()
  const doneLabel = intl.formatMessage({ id: "Done" })
  const roomLabel = intl.formatMessage({ id: "Room" })
  const disabledBookingOptionsHeader = intl.formatMessage({
    id: "Disabled booking options header",
  })
  const disabledBookingOptionsText = intl.formatMessage({
    id: "Disabled adding room",
  })
  const addRoomLabel = intl.formatMessage({ id: "Add Room" })

  const { getFieldState, trigger } = useFormContext<BookingWidgetSchema>()

  const roomsValue = useWatch({ name: "rooms" })

  async function handleOnClose() {
    const state = await trigger("rooms")
    if (state) {
      onClose()
    }
  }

  const fieldState = getFieldState("rooms")

  useEffect(() => {
    if (fieldState.invalid) {
      trigger("rooms")
    }
  }, [roomsValue, fieldState.invalid, trigger])

  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) => {
            const currentAdults = room.adults
            const currentChildren = room.child
            const childrenInAdultsBed =
              currentChildren.filter(
                (child) => child.bed === ChildBedMapEnum.IN_ADULTS_BED
              ).length ?? 0

            return (
              <div className={styles.roomContainer} key={index}>
                <section className={styles.roomDetailsContainer}>
                  <Subtitle type="two" className={styles.roomHeading}>
                    {roomLabel} {index + 1}
                  </Subtitle>
                  <AdultSelector
                    roomIndex={index}
                    currentAdults={currentAdults}
                    currentChildren={currentChildren}
                    childrenInAdultsBed={childrenInAdultsBed}
                  />
                  <ChildSelector
                    roomIndex={index}
                    currentAdults={currentAdults}
                    currentChildren={currentChildren}
                    childrenInAdultsBed={childrenInAdultsBed}
                  />
                </section>
                <Divider color="primaryLightSubtle" />
              </div>
            )
          })}
          <div className={styles.addRoomMobileContainer}>
            <Tooltip
              heading={disabledBookingOptionsHeader}
              text={disabledBookingOptionsText}
              position="bottom"
              arrow="left"
            >
              {rooms.length < 4 ? (
                <Button
                  intent="text"
                  variant="icon"
                  wrapping
                  disabled
                  theme="base"
                  fullWidth
                >
                  <PlusIcon />
                  {addRoomLabel}
                </Button>
              ) : null}
            </Tooltip>
          </div>
        </div>
      </section>
      <footer className={styles.footer}>
        <div className={styles.hideOnMobile}>
          <Tooltip
            heading={disabledBookingOptionsHeader}
            text={disabledBookingOptionsText}
            position={isOverflowed ? "top" : "bottom"}
            arrow="left"
          >
            {rooms.length < 4 ? (
              <Button
                intent="text"
                variant="icon"
                wrapping
                disabled
                theme="base"
              >
                <PlusCircleIcon />
                {addRoomLabel}
              </Button>
            ) : null}
          </Tooltip>
        </div>
        <Button
          onPress={handleOnClose}
          disabled={getFieldState("rooms").invalid}
          className={styles.hideOnMobile}
          intent="tertiary"
          theme="base"
          size="small"
        >
          {doneLabel}
        </Button>
        <Button
          onPress={handleOnClose}
          disabled={getFieldState("rooms").invalid}
          className={styles.hideOnDesktop}
          intent="tertiary"
          theme="base"
          size="large"
        >
          {doneLabel}
        </Button>
      </footer>
    </>
  )
}