import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"

import {
  CoffeeIcon,
  DiscountIcon,
  DoorClosedIcon,
  PriceTagIcon,
} from "@/components/Icons"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"

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

import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
import { BreakfastPackageEnum } from "@/types/enums/breakfast"

export default async function TotalPrice({
  confirmationNumber,
}: BookingConfirmationProps) {
  const intl = await getIntl()
  const { booking } = await getBookingConfirmation(confirmationNumber)

  const totalPrice = intl.formatNumber(booking.totalPrice, {
    currency: booking.currencyCode,
    style: "currency",
  })
  const breakfastPackage = booking.packages.find(
    (p) => p.code === BreakfastPackageEnum.REGULAR_BREAKFAST
  )
  return (
    <section className={styles.container}>
      <hgroup>
        <Subtitle color="uiTextPlaceholder" type="two">
          {intl.formatMessage({ id: "Total price" })}
        </Subtitle>
        <Subtitle color="uiTextHighContrast" type="two">
          {totalPrice} (~ EUR)
        </Subtitle>
      </hgroup>
      <div className={styles.items}>
        <div>
          <DoorClosedIcon />
          <Body color="uiTextPlaceholder">
            {`${intl.formatMessage({ id: "Room" })}, ${intl.formatMessage({ id: "booking.nights" }, { totalNights: 1 })}`}
          </Body>
          <Body color="uiTextHighContrast">{totalPrice}</Body>
        </div>
        <div>
          <CoffeeIcon />
          <Body color="uiTextPlaceholder">
            {intl.formatMessage({ id: "Breakfast" })}
          </Body>
          <Body color="uiTextHighContrast">
            {breakfastPackage
              ? intl.formatNumber(breakfastPackage.totalPrice, {
                  currency: breakfastPackage.currency,
                  style: "currency",
                })
              : intl.formatMessage({ id: "No breakfast" })}
          </Body>
        </div>
        <div>
          <DiscountIcon />
          <Body color="uiTextPlaceholder">
            {intl.formatMessage({ id: "Member discount" })}
          </Body>
          <Body color="uiTextHighContrast">N/A</Body>
        </div>
        <div>
          <PriceTagIcon height={20} width={20} />
          <Body color="uiTextPlaceholder">
            {intl.formatMessage({ id: "Points used" })}
          </Body>
          <Body color="uiTextHighContrast">N/A</Body>
        </div>
      </div>
      <Divider color="primaryLightSubtle" />
      <div className={styles.items}>
        <div>
          <Caption color="uiTextPlaceholder">
            {intl.formatMessage({ id: "Price excl VAT" })}
          </Caption>
          <Caption color="uiTextHighContrast">
            {intl.formatNumber(booking.totalPriceExVat, {
              currency: booking.currencyCode,
              style: "currency",
            })}
          </Caption>
        </div>
        <div>
          <Caption color="uiTextPlaceholder">
            {intl.formatMessage({ id: "VAT" })}
          </Caption>
          <Caption color="uiTextHighContrast">{booking.vatPercentage}%</Caption>
        </div>
        <div>
          <Caption color="uiTextPlaceholder">
            {intl.formatMessage({ id: "VAT amount" })}
          </Caption>
          <Caption color="uiTextHighContrast">
            {intl.formatNumber(booking.vatAmount, {
              currency: booking.currencyCode,
              style: "currency",
            })}
          </Caption>
        </div>
        <div>
          <Caption color="uiTextPlaceholder">
            {intl.formatMessage({ id: "Price incl VAT" })}
          </Caption>
          <Caption color="uiTextHighContrast">
            {intl.formatNumber(booking.totalPrice, {
              currency: booking.currencyCode,
              style: "currency",
            })}
          </Caption>
        </div>
        <div>
          <Caption color="uiTextPlaceholder">
            {intl.formatMessage({ id: "Payment method" })}
          </Caption>
          <Caption color="uiTextHighContrast">N/A</Caption>
        </div>
        <div>
          <Caption color="uiTextPlaceholder">
            {intl.formatMessage({ id: "Payment status" })}
          </Caption>
          <Caption color="uiTextHighContrast">N/A</Caption>
        </div>
      </div>
    </section>
  )
}
