web/apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx

"use client"

import { Button } from "react-aria-components"
import { 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 SkeletonShimmer from "@/components/SkeletonShimmer"
import Divider from "@/components/TempDesignSystem/Divider"
import useLang from "@/hooks/useLang"

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

import type {
  BookingWidgetSchema,
  BookingWidgetToggleButtonProps,
} from "@/types/components/bookingWidget"

export default function MobileToggleButton({
  openMobileSearch,
}: BookingWidgetToggleButtonProps) {
  const intl = useIntl()
  const lang = useLang()
  const date = useWatch<BookingWidgetSchema, "date">({ name: "date" })
  const rooms = useWatch<BookingWidgetSchema, "rooms">({ name: "rooms" })
  const searchTerm = useWatch<BookingWidgetSchema, "search">({ name: "search" })
  const selectedSearchTerm = useWatch<BookingWidgetSchema, "selectedSearch">({
    name: "selectedSearch",
  })

  const selectedFromDate = dt(date.fromDate).locale(lang).format("D MMM")
  const selectedToDate = dt(date.toDate).locale(lang).format("D MMM")

  const locationAndDateIsSet = searchTerm && date

  const totalNights = dt(date.toDate).diff(dt(date.fromDate), "days")
  const totalRooms = rooms.length
  const totalAdults = rooms.reduce((acc, room) => {
    if (room.adults) {
      acc = acc + room.adults
    }
    return acc
  }, 0)
  const totalChildren = rooms.reduce((acc, room) => {
    if (room.childrenInRoom) {
      acc = acc + room.childrenInRoom.length
    }
    return acc
  }, 0)

  const totalNightsMsg = intl.formatMessage(
    { id: "{totalNights, plural, one {# night} other {# nights}}" },
    { totalNights }
  )

  const totalAdultsMsg = intl.formatMessage(
    { id: "{totalAdults, plural, one {# adult} other {# adults}}" },
    { totalAdults }
  )

  const totalChildrenMsg = intl.formatMessage(
    { id: "{totalChildren, plural, one {# child} other {# children}}" },
    { totalChildren }
  )

  const totalRoomsMsg = intl.formatMessage(
    { id: "{totalRooms, plural, one {# room} other {# rooms}}" },
    { totalRooms }
  )

  const totalDetails = [totalAdultsMsg]
  if (totalChildren > 0) {
    totalDetails.push(totalChildrenMsg)
  }
  totalDetails.push(totalRoomsMsg)

  return (
    <Button
      className={locationAndDateIsSet ? styles.complete : styles.partial}
      onPress={openMobileSearch}
    >
      {!locationAndDateIsSet && (
        <>
          <span className={styles.block}>
            <Typography variant={"Body/Supporting text (caption)/smBold"}>
              <span className={styles.blockLabel}>
                {intl.formatMessage({ id: "Where to?" })}
              </span>
            </Typography>
            <Typography variant={"Body/Paragraph/mdRegular"}>
              <span className={styles.placeholder}>
                {searchTerm
                  ? searchTerm
                  : intl.formatMessage({ id: "Destination" })}
              </span>
            </Typography>
          </span>
          {/* Divider can't be a div  */}
          <Divider color="baseSurfaceSubtleNormal" variant="vertical" />
          <span className={styles.block}>
            <Typography variant={"Body/Supporting text (caption)/smBold"}>
              <span className={styles.blockLabel}>{totalNightsMsg}</span>
            </Typography>
            <Typography variant={"Body/Paragraph/mdRegular"}>
              <span>
                {intl.formatMessage(
                  { id: "{selectedFromDate} - {selectedToDate}" },
                  {
                    selectedFromDate,
                    selectedToDate,
                  }
                )}
              </span>
            </Typography>
          </span>
          <span className={styles.icon}>
            <MaterialIcon icon="search" color="Icon/Inverted" />
          </span>
        </>
      )}

      {locationAndDateIsSet && (
        <>
          <span className={styles.block}>
            <Typography variant={"Body/Supporting text (caption)/smRegular"}>
              <span className={styles.blockLabel}>{selectedSearchTerm}</span>
            </Typography>
            <Typography variant={"Body/Supporting text (caption)/smRegular"}>
              <span className={styles.locationAndDate}>
                {intl.formatMessage(
                  {
                    id: "{selectedFromDate} - {selectedToDate} ({totalNights}) {details}",
                  },
                  {
                    selectedFromDate,
                    selectedToDate,
                    totalNights: totalNightsMsg,
                    details: totalDetails.join(", "),
                  }
                )}
              </span>
            </Typography>
          </span>
          <span className={styles.icon}>
            <MaterialIcon icon="edit_square" color="Icon/Inverted" />
          </span>
        </>
      )}
    </Button>
  )
}

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

  return (
    <div className={styles.partial}>
      <span className={styles.block}>
        <Typography variant={"Body/Supporting text (caption)/smBold"}>
          <span className={styles.blockLabel}>
            {intl.formatMessage({ id: "Where to?" })}
          </span>
        </Typography>
        <SkeletonShimmer display={"block"} height="24px" />
      </span>
      <Divider color="baseSurfaceSubtleNormal" variant="vertical" />
      <span className={styles.block}>
        <Typography variant="Body/Supporting text (caption)/smBold">
          <span className={styles.blockLabel}>
            {intl.formatMessage(
              { id: "{totalNights, plural, one {# night} other {# nights}}" },
              { totalNights: 0 }
            )}
          </span>
        </Typography>
        <SkeletonShimmer display={"block"} height="24px" />
      </span>
      <span className={styles.icon}>
        <MaterialIcon icon="search" color="Icon/Inverted" />
      </span>
    </div>
  )
}