web/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx

"use client"
import { useRouter } from "next/navigation"
import { useState, useTransition } from "react"
import { useIntl } from "react-intl"

import { dt } from "@/lib/dt"
import { useRatesStore } from "@/stores/select-rate"

import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
import SignupPromoMobile from "@/components/HotelReservation/SignupPromo/Mobile"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { formatPrice } from "@/utils/numberFormatting"

import MobileSummary from "./MobileSummary"
import { calculateTotalPrice } from "./utils"

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

import type { RateSummaryProps } from "@/types/components/hotelReservation/selectRate/rateSummary"
import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
import type { Rate } from "@/types/components/hotelReservation/selectRate/selectRate"
import { RateTypeEnum } from "@/types/enums/rateType"

export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
  const {
    bookingRooms,
    petRoomPackage,
    rateSummary,
    roomsAvailability,
    searchParams,
  } = useRatesStore((state) => ({
    bookingRooms: state.booking.rooms,
    petRoomPackage: state.petRoomPackage,
    rateSummary: state.rateSummary,
    roomsAvailability: state.roomsAvailability,
    searchParams: state.searchParams,
  }))

  const [isSubmitting, setIsSubmitting] = useState(false)
  const intl = useIntl()
  const router = useRouter()
  const params = new URLSearchParams(searchParams)
  const [_, startTransition] = useTransition()

  if (!roomsAvailability) {
    return null
  }

  const checkInDate = new Date(roomsAvailability.checkInDate)
  const checkOutDate = new Date(roomsAvailability.checkOutDate)
  const nights = dt(checkOutDate).diff(dt(checkInDate), "days")

  const totalNights = intl.formatMessage(
    { id: "{totalNights, plural, one {# night} other {# nights}}" },
    { totalNights: nights }
  )
  const totalAdults = intl.formatMessage(
    { id: "{totalAdults, plural, one {# adult} other {# adults}}" },
    { totalAdults: bookingRooms.reduce((acc, room) => acc + room.adults, 0) }
  )
  const childrenInOneOrMoreRooms = bookingRooms.some(
    (room) => room.childrenInRoom?.length
  )
  const childrenInroom = intl.formatMessage(
    { id: "{totalChildren, plural, one {# child} other {# children}}" },
    {
      totalChildren: bookingRooms.reduce(
        (acc, room) => acc + (room.childrenInRoom?.length ?? 0),
        0
      ),
    }
  )
  const totalChildren = childrenInOneOrMoreRooms ? `, ${childrenInroom}` : ""
  const totalRooms = intl.formatMessage(
    { id: "{totalRooms, plural, one {# room} other {# rooms}}" },
    { totalRooms: bookingRooms.length }
  )

  const summaryPriceText = `${totalNights}, ${totalAdults}${totalChildren}, ${totalRooms}`

  const totalRoomsRequired = bookingRooms.length
  const isAllRoomsSelected = rateSummary.length === totalRoomsRequired
  const hasMemberRates = rateSummary.some((room) => room.member)
  const showMemberDiscountBanner = hasMemberRates && !isUserLoggedIn

  const freeCancelation = intl.formatMessage({ id: "Free cancellation" })
  const nonRefundable = intl.formatMessage({ id: "Non-refundable" })
  const freeBooking = intl.formatMessage({ id: "Free rebooking" })
  const payLater = intl.formatMessage({ id: "Pay later" })
  const payNow = intl.formatMessage({ id: "Pay now" })

  function getRateDetails(rate: Rate["rate"]) {
    switch (rate) {
      case "change":
        return `${freeBooking}, ${payNow}`
      case "flex":
        return `${freeCancelation}, ${payLater}`
      case "save":
      default:
        return `${nonRefundable}, ${payNow}`
    }
  }

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setIsSubmitting(true)
    startTransition(() => {
      router.push(`details?${params}`)
    })
  }

  if (!rateSummary.length) {
    return null
  }

  const isBookingCodeRate = rateSummary.some(
    (rate) => rate.public?.rateType !== RateTypeEnum.Regular
  )
  const showDiscounted = isUserLoggedIn || isBookingCodeRate

  const totalPriceToShow = calculateTotalPrice(
    rateSummary,
    isUserLoggedIn,
    petRoomPackage
  )

  return (
    <form action={`details?${params}`} method="GET" onSubmit={handleSubmit}>
      <div className={styles.summary}>
        <div className={styles.content}>
          <div className={styles.summaryText}>
            {rateSummary.map((room, index) => {
              return (
                <div key={index} className={styles.roomSummary}>
                  {rateSummary.length > 1 ? (
                    <>
                      <Subtitle color="uiTextHighContrast">
                        {intl.formatMessage(
                          { id: "Room {roomIndex}" },
                          { roomIndex: index + 1 }
                        )}
                      </Subtitle>
                      <Body color="uiTextMediumContrast">{room.roomType}</Body>
                      <Caption color="uiTextMediumContrast">
                        {getRateDetails(room.rate)}
                      </Caption>
                    </>
                  ) : (
                    <>
                      <Subtitle color="uiTextHighContrast">
                        {room.roomType}
                      </Subtitle>
                      <Body color="uiTextMediumContrast">
                        {getRateDetails(room.rate)}
                      </Body>
                    </>
                  )}
                </div>
              )
            })}
            {/* Render unselected rooms */}
            {Array.from({
              length: totalRoomsRequired - rateSummary.length,
            }).map((_, index) => (
              <div key={`unselected-${index}`} className={styles.roomSummary}>
                <Subtitle color="uiTextPlaceholder">
                  {intl.formatMessage(
                    { id: "Room {roomIndex}" },
                    { roomIndex: rateSummary.length + index + 1 }
                  )}
                </Subtitle>
                <Body color="uiTextPlaceholder">
                  {intl.formatMessage({ id: "Select room" })}
                </Body>
              </div>
            ))}
          </div>
          <div className={styles.summaryPriceContainer}>
            {showMemberDiscountBanner && (
              <div className={styles.promoContainer}>
                <SignupPromoDesktop
                  memberPrice={{
                    amount: rateSummary.reduce((total, room) => {
                      const memberPrice =
                        room.member?.localPrice.pricePerStay ?? 0
                      const isPetRoom = room.features.find(
                        (feature) =>
                          feature.code === RoomPackageCodeEnum.PET_ROOM
                      )
                      const petRoomPrice =
                        isPetRoom && petRoomPackage
                          ? Number(petRoomPackage.localPrice.totalPrice)
                          : 0
                      return total + memberPrice + petRoomPrice
                    }, 0),
                    currency: (rateSummary[0].member?.localPrice.currency ??
                      rateSummary[0].public?.localPrice.currency)!,
                  }}
                />
              </div>
            )}
            <div className={styles.summaryPriceTextDesktop}>
              <Body>
                {intl.formatMessage(
                  { id: "<b>Total price</b> (incl VAT)" },
                  { b: (str) => <b>{str}</b> }
                )}
              </Body>
              <Caption color="uiTextMediumContrast">{summaryPriceText}</Caption>
            </div>
            <div className={styles.summaryPrice}>
              <div className={styles.summaryPriceTextDesktop}>
                <Subtitle
                  color={showDiscounted ? "red" : "uiTextHighContrast"}
                  textAlign="right"
                >
                  {formatPrice(
                    intl,
                    totalPriceToShow.local.price,
                    totalPriceToShow.local.currency
                  )}
                </Subtitle>
                {totalPriceToShow.requested ? (
                  <Body color="uiTextMediumContrast">
                    {intl.formatMessage(
                      { id: "Approx. {value}" },
                      {
                        value: formatPrice(
                          intl,
                          totalPriceToShow.requested.price,
                          totalPriceToShow.requested.currency
                        ),
                      }
                    )}
                  </Body>
                ) : null}
              </div>
              <div className={styles.summaryPriceTextMobile}>
                <Caption color="uiTextHighContrast">
                  {intl.formatMessage({ id: "Total price" })}
                </Caption>
                <Subtitle color={showDiscounted ? "red" : "uiTextHighContrast"}>
                  {formatPrice(
                    intl,
                    totalPriceToShow.local.price,
                    totalPriceToShow.local.currency
                  )}
                </Subtitle>
                <Footnote
                  color="uiTextMediumContrast"
                  className={styles.summaryPriceTextMobile}
                >
                  {summaryPriceText}
                </Footnote>
              </div>
              <Button
                className={styles.continueButton}
                disabled={!isAllRoomsSelected || isSubmitting}
                theme="base"
                type="submit"
              >
                {intl.formatMessage({ id: "Continue" })}
              </Button>
            </div>
          </div>
        </div>
        <div className={styles.mobileSummary}>
          {showMemberDiscountBanner ? <SignupPromoMobile /> : null}
          <MobileSummary
            isAllRoomsSelected={isAllRoomsSelected}
            isUserLoggedIn={isUserLoggedIn}
            totalPriceToShow={totalPriceToShow}
          />
        </div>
      </div>
    </form>
  )
}