"use client"

import { useEnterDetailsStore } from "@/stores/enter-details"

import SidePanel from "@/components/HotelReservation/SidePanel"

import SummaryUI from "./UI"

import type { SummaryProps } from "@/types/components/hotelReservation/summary"
import type { DetailsState } from "@/types/stores/enter-details"

function storeSelector(state: DetailsState) {
  return {
    bedType: state.bedType,
    booking: state.booking,
    breakfast: state.breakfast,
    guest: state.guest,
    packages: state.packages,
    roomRate: state.roomRate,
    roomPrice: state.roomPrice,
    toggleSummaryOpen: state.actions.toggleSummaryOpen,
    togglePriceDetailsModalOpen: state.actions.togglePriceDetailsModalOpen,
    totalPrice: state.totalPrice,
    vat: state.vat,
  }
}

export default function DesktopSummary(props: SummaryProps) {
  const {
    bedType,
    booking,
    breakfast,
    guest,
    packages,
    roomPrice,
    roomRate,
    toggleSummaryOpen,
    togglePriceDetailsModalOpen,
    totalPrice,
    vat,
  } = useEnterDetailsStore(storeSelector)

  // TODO: rooms should be part of store
  const rooms = [
    {
      adults: booking.rooms[0].adults,
      childrenInRoom: booking.rooms[0].childrenInRoom,
      bedType,
      breakfast,
      guest,
      roomRate,
      roomPrice,
      roomType: props.roomType,
      rateDetails: props.rateDetails,
      cancellationText: props.cancellationText,
    },
  ]

  return (
    <SidePanel variant="summary">
      <SummaryUI
        booking={booking}
        rooms={rooms}
        isMember={props.isMember}
        breakfastIncluded={props.breakfastIncluded}
        packages={packages}
        totalPrice={totalPrice}
        vat={vat}
        toggleSummaryOpen={toggleSummaryOpen}
        togglePriceDetailsModalOpen={togglePriceDetailsModalOpen}
      />
    </SidePanel>
  )
}