web/apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx

"use client"

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

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { dt } from "@/lib/dt"

import DatePicker from "@/components/DatePicker"
import GuestsRoomsPickerForm from "@/components/GuestsRoomsPicker"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Button from "@/components/TempDesignSystem/Button"

import { RemoveExtraRooms } from "./BookingCode"
import { Search, SearchSkeleton } from "./Search"
import ValidationError from "./ValidationError"
import Voucher, { VoucherSkeleton } from "./Voucher"

import styles from "./formContent.module.css"

import type { BookingWidgetSchema } from "@/types/components/bookingWidget"
import type { BookingWidgetFormContentProps } from "@/types/components/form/bookingwidget"

export default function FormContent({
  formId,
  onSubmit,
  isSearching,
}: BookingWidgetFormContentProps) {
  const intl = useIntl()
  const {
    formState: { errors },
  } = useFormContext<BookingWidgetSchema>()

  const selectedDate = useWatch<BookingWidgetSchema, "date">({ name: "date" })

  const nights = dt(selectedDate.toDate).diff(dt(selectedDate.fromDate), "days")

  return (
    <div className={styles.input}>
      <div className={styles.inputContainer}>
        <div className={styles.where}>
          <Search
            handlePressEnter={onSubmit}
            selectOnBlur={true}
            inputName="search"
            includeTypes={["cities", "hotels"]}
          />
          {errors.search && <ValidationError />}
        </div>
        <div className={styles.when}>
          <Typography
            variant="Body/Supporting text (caption)/smBold"
            className={styles.label}
          >
            <label htmlFor="date">
              {nights > 0
                ? intl.formatMessage(
                    {
                      defaultMessage:
                        "{totalNights, plural, one {# night} other {# nights}}",
                    },
                    { totalNights: nights }
                  )
                : intl.formatMessage({
                    defaultMessage: "Check in",
                  })}
            </label>
          </Typography>
          <DatePicker name="date" />
        </div>
        <div className={styles.rooms}>
          <Typography
            variant="Body/Supporting text (caption)/smBold"
            className={styles.label}
          >
            <label id="rooms-and-guests">
              {intl.formatMessage({
                defaultMessage: "Rooms & Guests",
              })}
            </label>
          </Typography>
          <GuestsRoomsPickerForm ariaLabelledBy="rooms-and-guests" />
        </div>
      </div>
      <div className={`${styles.buttonContainer} ${styles.showOnTablet}`}>
        <Button
          className={styles.button}
          form={formId}
          intent="primary"
          theme="base"
          type="submit"
        >
          <span className={styles.icon}>
            <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
          </span>
        </Button>
      </div>
      <div className={`${styles.voucherContainer} ${styles.voucherRow}`}>
        <Voucher />
      </div>
      <div className={`${styles.buttonContainer} ${styles.hideOnTablet}`}>
        {errors.bookingCode?.value?.message?.indexOf("Multi-room") === 0 ? (
          <RemoveExtraRooms
            size="medium"
            fullWidth
            className={styles.showOnMobile}
          />
        ) : null}
        <Button
          className={styles.button}
          form={formId}
          intent="primary"
          theme="base"
          type="submit"
          disabled={isSearching}
        >
          <Typography
            variant="Body/Supporting text (caption)/smBold"
            className={styles.buttonText}
          >
            <span>
              {intl.formatMessage({
                defaultMessage: "Search",
              })}
            </span>
          </Typography>
          <span className={styles.icon}>
            <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
          </span>
        </Button>
      </div>
    </div>
  )
}

export function BookingWidgetFormContentSkeleton() {
  const intl = useIntl()

  return (
    <div className={styles.input}>
      <div className={styles.inputContainer}>
        <div className={styles.where}>
          <SearchSkeleton />
        </div>
        <div className={styles.when}>
          <Typography
            variant="Body/Supporting text (caption)/smBold"
            className={styles.label}
          >
            <label>
              {intl.formatMessage(
                {
                  defaultMessage:
                    "{totalNights, plural, one {# night} other {# nights}}",
                },
                { totalNights: 0 }
              )}
            </label>
          </Typography>
          <SkeletonShimmer width={"100%"} display={"block"} />
        </div>
        <div className={styles.rooms}>
          <Typography
            variant="Body/Supporting text (caption)/smBold"
            className={styles.label}
          >
            <label id="rooms-and-guests">
              {intl.formatMessage({
                defaultMessage: "Rooms & Guests",
              })}
            </label>
          </Typography>
          <SkeletonShimmer width={"100%"} display={"block"} />
        </div>
      </div>
      <div className={styles.voucherContainer}>
        <VoucherSkeleton />
      </div>
      <div className={styles.buttonContainer}>
        <Button
          className={styles.button}
          intent="primary"
          theme="base"
          type="submit"
          disabled
        >
          <Typography
            variant="Body/Supporting text (caption)/smBold"
            className={styles.buttonText}
          >
            <span>
              {intl.formatMessage({
                defaultMessage: "Search",
              })}
            </span>
          </Typography>

          <span className={styles.icon}>
            <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
          </span>
        </Button>
      </div>
    </div>
  )
}