"use client"

import { cx } from "class-variance-authority"
import { useIntl } from "react-intl"

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

import { useBookingConfirmationStore } from "../../../../stores/booking-confirmation"
import PriceDetails from "../../PriceDetails"

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

export default function TotalPrice() {
  const intl = useIntl()
  const { rooms, formattedTotalCost } = useBookingConfirmationStore(
    (state) => ({
      bookingCode: state.bookingCode,
      rooms: state.rooms,
      formattedTotalCost: state.formattedTotalCost,
    })
  )

  const hasAllRoomsLoaded = rooms.every((room) => room)
  const bookingCode = rooms.find((room) => room?.bookingCode)?.bookingCode
  const isMemberRate = rooms.some((room) => room?.rateDefinition.isMemberRate)
  const showDiscounted = bookingCode || isMemberRate

  return (
    <>
      <div className={styles.price}>
        <div className={styles.entry}>
          <div>
            <Typography variant="Body/Paragraph/mdRegular">
              <p>
                {intl.formatMessage(
                  {
                    id: "booking.totalPriceInclVat",
                    defaultMessage: "<b>Total price</b> (incl VAT)",
                  },
                  {
                    b: (str) => (
                      <Typography variant="Body/Paragraph/mdBold">
                        <span>{str}</span>
                      </Typography>
                    ),
                  }
                )}
              </p>
            </Typography>
            {/* TODO: Add approx price, we're currently not receiving this value from API  */}
          </div>
          <div className={styles.prices}>
            {hasAllRoomsLoaded ? (
              <Typography variant="Body/Paragraph/mdBold">
                <span
                  className={cx(styles.price, {
                    [styles.discounted]: showDiscounted,
                  })}
                >
                  {formattedTotalCost}
                </span>
              </Typography>
            ) : (
              <SkeletonShimmer width="25%" />
            )}
          </div>
        </div>
      </div>
      <div>
        {hasAllRoomsLoaded ? (
          <PriceDetails />
        ) : (
          <SkeletonShimmer width="100%" />
        )}
      </div>
    </>
  )
}