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

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

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

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

export default function PriceDetails() {
  const bookedRoom = useMyStayRoomDetailsStore((state) => state.bookedRoom)
  const linkedReservationRooms = useMyStayRoomDetailsStore(
    (state) => state.linkedReservationRooms
  )

  const rooms = [bookedRoom, ...linkedReservationRooms]
    .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>
  )
}