"use client"
import { dt } from "@/lib/dt"
import { useMyStayStore } from "@/stores/my-stay"

import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"

import { calculateTotalPrice, mapToPrice } from "./mapToPrice"

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

export default function PriceDetails() {
  const { bookedRoom, rooms } = useMyStayStore((state) => ({
    bookedRoom: state.bookedRoom,
    rooms: state.rooms
      .filter((room) => !room.isCancelled)
      .map((room) => ({
        ...room,
        breakfastIncluded: room.rateDefinition.breakfastIncluded,
        price: mapToPrice(room),
        roomType: room.roomName,
      })),
  }))

  const bookingCode =
    rooms.find((room) => room.bookingCode)?.bookingCode ?? undefined
  const totalPrice = calculateTotalPrice(rooms, bookedRoom.currencyCode)

  const fromDate = dt(bookedRoom.checkInDate).format("YYYY-MM-DD")
  const toDate = dt(bookedRoom.checkOutDate).format("YYYY-MM-DD")
  return (
    <div className={styles.priceDetailsModal}>
      <PriceDetailsModal
        bookingCode={bookingCode}
        fromDate={fromDate}
        rooms={rooms}
        toDate={toDate}
        totalPrice={totalPrice}
        vat={bookedRoom.vatPercentage}
      />
    </div>
  )
}