"use client"
import { useIntl } from "react-intl"

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

import { useMyStayStore } from "@/stores/my-stay"

import PriceType from "@/components/HotelReservation/MyStay/PriceType"
import { sumPackages } from "@/components/HotelReservation/utils"

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

export default function PriceDetails() {
  const intl = useIntl()

  const pricing = useMyStayStore((state) => ({
    cheques: state.bookedRoom.cheques,
    formattedTotalPrice: state.totalPrice,
    isCancelled: state.bookedRoom.isCancelled,
    currencyCode: state.bookedRoom.currencyCode,
    packages: state.bookedRoom.packages,
    priceType: state.bookedRoom.priceType,
    rateDefinition: state.bookedRoom.rateDefinition,
    totalPoints: state.bookedRoom.totalPoints,
    totalPrice: state.bookedRoom.totalPrice,
    vouchers: state.bookedRoom.vouchers,
  }))

  let totalPrice = pricing.totalPrice
  // API returns negative values for totalPrice
  // on voucher bookings (╯°□°）╯︵ ┻━┻
  if (pricing.vouchers && totalPrice < 0) {
    const pkgsSum = sumPackages(pricing.packages)
    totalPrice = pkgsSum.price
  }

  return (
    <div className={styles.priceDetails}>
      <div className={styles.price}>
        <Typography variant="Body/Lead text">
          <p>
            {intl.formatMessage({
              defaultMessage: "Room total",
            })}
          </p>
        </Typography>
        <PriceType {...pricing} totalPrice={totalPrice} />
      </div>
    </div>
  )
}
