"use client"

import { useIntl } from "react-intl"

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

import { useBookingConfirmationStore } from "@/stores/booking-confirmation"

import BookingCodeChip from "@/components/BookingCodeChip"
import SkeletonShimmer from "@/components/SkeletonShimmer"

import PriceDetails from "../../PriceDetails"

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

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

  const hasAllRoomsLoaded = rooms.every((room) => room)
  const bookingCode = rooms.find((room) => room?.bookingCode)?.bookingCode

  return (
    <>
      <Divider color="Border/Divider/Subtle" />
      <div className={styles.price}>
        <div className={styles.entry}>
          <Typography variant="Body/Paragraph/mdBold">
            <p>
              {intl.formatMessage({
                defaultMessage: "Total price",
              })}
            </p>
          </Typography>
          {hasAllRoomsLoaded ? (
            <Typography variant="Body/Paragraph/mdBold">
              <p>{formattedTotalCost}</p>
            </Typography>
          ) : (
            <SkeletonShimmer width={"25%"} />
          )}
        </div>
        {hasAllRoomsLoaded ? (
          <PriceDetails />
        ) : (
          <div className={styles.priceDetailsLoader}>
            <SkeletonShimmer width={"100%"} />
          </div>
        )}
      </div>
      {bookingCode && <BookingCodeChip bookingCode={bookingCode} alignCenter />}
    </>
  )
}