web/apps/scandic-web/components/HotelReservation/MyStay/PriceDetails/PriceDetailsTable/index.tsx

"use client"

import { Fragment } from "react"
import { useIntl } from "react-intl"

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

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

import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang"
import { formatPrice } from "@/utils/numberFormatting"

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

import type { Price } from "@/types/components/hotelReservation/price"
import type { Room } from "@/stores/my-stay/myStayRoomDetailsStore"

function Row({
  label,
  value,
  bold,
}: {
  label: string
  value: string
  bold?: boolean
}) {
  return (
    <tr className={styles.row}>
      <td>
        <Typography
          variant={
            bold
              ? "Body/Supporting text (caption)/smBold"
              : "Body/Supporting text (caption)/smRegular"
          }
        >
          <span>{label}</span>
        </Typography>
      </td>
      <td className={styles.price}>
        <Typography
          variant={
            bold
              ? "Body/Supporting text (caption)/smBold"
              : "Body/Supporting text (caption)/smRegular"
          }
        >
          <span>{value}</span>
        </Typography>
      </td>
    </tr>
  )
}

function TableSection({ children }: React.PropsWithChildren) {
  return <tbody className={styles.tableSection}>{children}</tbody>
}

function TableSectionHeader({
  title,
  subtitle,
}: {
  title: string
  subtitle?: string
}) {
  return (
    <>
      <tr>
        <th colSpan={2}>
          <Typography variant="Body/Paragraph/mdRegular">
            <span>{title}</span>
          </Typography>
        </th>
      </tr>
      {subtitle && (
        <tr>
          <th colSpan={2}>
            <Typography variant="Body/Paragraph/mdRegular">
              <span>{subtitle}</span>
            </Typography>
          </th>
        </tr>
      )}
    </>
  )
}

export type RoomPriceDetails = Pick<
  Room,
  | "adults"
  | "bedType"
  | "breakfast"
  | "childrenInRoom"
  | "roomPrice"
  | "roomName"
  | "packages"
  | "isCancelled"
> & {
  guest?: Room["guest"]
}

export interface PriceDetailsTableProps {
  bookingCode?: string | null
  fromDate: string
  bookedRoom: RoomPriceDetails
  linkedReservationRooms: RoomPriceDetails[]
  toDate: string
  totalPrice: Price
  vat: number
}

export default function PriceDetailsTable({
  bookingCode,
  fromDate,
  bookedRoom,
  linkedReservationRooms,
  toDate,
  totalPrice,
  vat,
}: PriceDetailsTableProps) {
  const intl = useIntl()
  const lang = useLang()

  const rooms = [bookedRoom, ...linkedReservationRooms].filter(
    (room) => !room.isCancelled
  )

  const diff = dt(toDate).diff(fromDate, "days")
  const nights = intl.formatMessage(
    { id: "{totalNights, plural, one {# night} other {# nights}}" },
    { totalNights: diff }
  )
  const vatPercentage = vat / 100
  const vatAmount = totalPrice.local.price * vatPercentage

  const priceExclVat = totalPrice.local.price - vatAmount

  const duration = ` ${dt(fromDate).locale(lang).format("ddd, D MMM")}
          -
          ${dt(toDate).locale(lang).format("ddd, D MMM")} (${nights})`

  return (
    <table className={styles.priceDetailsTable}>
      {rooms.map((room, idx) => {
        return (
          <Fragment key={idx}>
            <TableSection>
              {rooms.length > 1 && (
                <tr>
                  <td>
                    <Typography variant="Body/Paragraph/mdBold">
                      <span>
                        {intl.formatMessage(
                          { id: "Room {roomIndex}" },
                          { roomIndex: idx + 1 }
                        )}
                      </span>
                    </Typography>
                  </td>
                </tr>
              )}
              <TableSectionHeader title={room.roomName} subtitle={duration} />
              <Row
                label={intl.formatMessage({ id: "Average price per night" })}
                value={formatPrice(
                  intl,
                  room.roomPrice.perNight.local.price,
                  room.roomPrice.perNight.local.currency
                )}
              />
              {room.packages
                ? room.packages.map((feature) => (
                    <Row
                      key={feature.code}
                      label={feature.description}
                      value={formatPrice(
                        intl,
                        +feature.localPrice.totalPrice,
                        feature.localPrice.currency
                      )}
                    />
                  ))
                : null}
              <Row
                bold
                label={intl.formatMessage({ id: "Room charge" })}
                value={formatPrice(
                  intl,
                  room.roomPrice.perStay.local.price,
                  room.roomPrice.perStay.local.currency
                )}
              />
            </TableSection>
            {room.breakfast ? (
              <TableSection>
                <Row
                  label={intl.formatMessage(
                    {
                      id: "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}{totalChildren, plural, =0 {} one {, # child} other {, # children}}) x {totalBreakfasts}",
                    },
                    {
                      totalAdults: room.adults,
                      totalChildren: room.childrenInRoom.length,
                      totalBreakfasts: diff,
                    }
                  )}
                  value={formatPrice(
                    intl,
                    room.breakfast.localPrice.totalPrice,
                    room.breakfast.localPrice.currency
                  )}
                />
                <Row
                  bold
                  label={intl.formatMessage({
                    id: "Breakfast charge",
                  })}
                  value={formatPrice(
                    intl,
                    room.breakfast.localPrice.totalPrice,
                    room.breakfast.localPrice.currency
                  )}
                />
              </TableSection>
            ) : null}
          </Fragment>
        )
      })}
      <TableSection>
        <TableSectionHeader title={intl.formatMessage({ id: "Total" })} />
        <Row
          label={intl.formatMessage({ id: "Price excluding VAT" })}
          value={formatPrice(intl, priceExclVat, totalPrice.local.currency)}
        />
        <Row
          label={intl.formatMessage({ id: "VAT {vat}%" }, { vat })}
          value={formatPrice(intl, vatAmount, totalPrice.local.currency)}
        />
        <tr className={styles.row}>
          <td>
            <Body textTransform="bold">
              {intl.formatMessage({ id: "Price including VAT" })}
            </Body>
          </td>
          <td className={styles.price}>
            <Body textTransform="bold">
              {formatPrice(
                intl,
                totalPrice.local.price,
                totalPrice.local.currency
              )}
            </Body>
          </td>
        </tr>
        {totalPrice.local.regularPrice && (
          <tr className={styles.row}>
            <td></td>
            <td className={styles.price}>
              <Caption color="uiTextMediumContrast" striked={true}>
                {formatPrice(
                  intl,
                  totalPrice.local.regularPrice,
                  totalPrice.local.currency
                )}
              </Caption>
            </td>
          </tr>
        )}
        {bookingCode && totalPrice.local.regularPrice && (
          <tr className={styles.row}>
            <td>
              <MaterialIcon icon="sell" />
              {bookingCode}
            </td>
            <td></td>
          </tr>
        )}
      </TableSection>
    </table>
  )
}