"use client"

import { useIntl } from "react-intl"

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

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

import SkeletonShimmer from "@/components/SkeletonShimmer"
import Divider from "@/components/TempDesignSystem/Divider"

import PriceDetailsModal from "../../PriceDetailsModal"

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)

  return (
    <>
      <Divider color="primaryLightSubtle" />
      <div className={styles.price}>
        <div className={styles.entry}>
          <Typography variant="Body/Paragraph/mdBold">
            <p>{intl.formatMessage({ id: "Total price" })}</p>
          </Typography>
          {hasAllRoomsLoaded ? (
            <Typography variant="Body/Paragraph/mdBold">
              <p>{formattedTotalCost}</p>
            </Typography>
          ) : (
            <SkeletonShimmer width={"25%"} />
          )}
        </div>
        {hasAllRoomsLoaded ? (
          <PriceDetailsModal />
        ) : (
          <div className={styles.priceDetailsLoader}>
            <SkeletonShimmer width={"100%"} />
          </div>
        )}
      </div>
    </>
  )
}