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

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

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

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

  return (
    <div className={styles.priceDetailsModal}>
      <PriceDetailsModal>
        <PriceDetailsTable
          fromDate={dt(bookedRoom.checkInDate).format("YYYY-MM-DD")}
          toDate={dt(bookedRoom.checkOutDate).format("YYYY-MM-DD")}
          linkedReservationRooms={linkedReservationRooms}
          bookedRoom={bookedRoom}
          totalPrice={{
            requested: undefined,
            local: {
              currency: currencyCode,
              price: totalPrice ?? 0,
            },
          }}
          vat={bookedRoom.vatPercentage}
        />
      </PriceDetailsModal>
    </div>
  )
}