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 { 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 Caption from "@/components/TempDesignSystem/Text/Caption"

import { RemoveExtraRooms } from "./BookingCode"
import { Search, SearchSkeleton } from "./Search"
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"
            />
          </div>
          <div className={styles.when}>
            <Caption color="red" type="bold">
              {nights > 0
                ? intl.formatMessage(
                    {
                      defaultMessage:
                        "{totalNights, plural, one {# night} other {# nights}}",
                    },
                    { totalNights: nights }
                  )
                : intl.formatMessage({
                    defaultMessage: "Check in",
                  })}
            </Caption>
            <DatePicker />
          </div>
          <div className={styles.rooms}>
            <label>
              <Caption color="red" type="bold" asChild>
                <span>
                  {intl.formatMessage({
                    defaultMessage: "Rooms & Guests",
                  })}
                </span>
              </Caption>
            </label>
            <GuestsRoomsPickerForm />
          </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}
          >
            <Caption
              color="white"
              type="bold"
              className={styles.buttonText}
              asChild
            >
              <span>
                {intl.formatMessage({
                  defaultMessage: "Search",
                })}
              </span>
            </Caption>
            <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}>
          <Caption color="red" type="bold">
            {intl.formatMessage(
              {
                defaultMessage:
                  "{totalNights, plural, one {# night} other {# nights}}",
              },
              { totalNights: 0 }
            )}
          </Caption>
          <SkeletonShimmer width={"100%"} display={"block"} />
        </div>
        <div className={styles.rooms}>
          <Caption color="red" type="bold" asChild>
            <span>
              {intl.formatMessage({
                defaultMessage: "Rooms & Guests",
              })}
            </span>
          </Caption>
          <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
        >
          <Caption
            color="white"
            type="bold"
            className={styles.buttonText}
            asChild
          >
            <span>
              {intl.formatMessage({
                defaultMessage: "Search",
              })}
            </span>
          </Caption>
          <span className={styles.icon}>
            <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
          </span>
        </Button>
      </div>
    </div>
  )
}