"use client"

import { useIntl } from "react-intl"

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

import { ChevronRightSmallIcon } from "@/components/Icons"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import { formatPrice } from "@/utils/numberFormatting"

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

export default function TotalPrice() {
  const intl = useIntl()
  const rooms = useBookingConfirmationStore((state) => state.rooms)
  const currencyCode = useBookingConfirmationStore(
    (state) => state.currencyCode
  )
  const hasAllRoomsLoaded = rooms.every((room) => room)
  const grandTotal = rooms.reduce((acc, room) => {
    const reservationTotalPrice = room?.totalPrice || 0
    return acc + reservationTotalPrice
  }, 0)

  return (
    <>
      <Divider color="primaryLightSubtle" />
      <div className={styles.price}>
        <div className={styles.entry}>
          <Body textTransform="bold">
            {intl.formatMessage({ id: "Total price" })}
          </Body>
          {hasAllRoomsLoaded ? (
            <Body textTransform="bold">
              {formatPrice(intl, grandTotal, currencyCode)}
            </Body>
          ) : (
            <SkeletonShimmer width={"25%"} />
          )}
        </div>
        {hasAllRoomsLoaded ? (
          <div className={styles.entry}>
            <Button
              className={styles.btn}
              intent="text"
              size="small"
              theme="base"
              variant="icon"
              wrapping
            >
              {intl.formatMessage({ id: "Price details" })}
              <ChevronRightSmallIcon />
            </Button>
          </div>
        ) : (
          <div className={styles.priceDetailsLoader}>
            <SkeletonShimmer width={"100%"} />
          </div>
        )}
      </div>
    </>
  )
}
