"use client"

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

import SignupPromoMobile from "@/components/HotelReservation/SignupPromo/Mobile"

import SummaryUI from "../UI"
import SummaryBottomSheet from "./BottomSheet"

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

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 MobileSummary(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,
    },
  ]
  const showPromo = !props.isMember && !guest.join && !guest.membershipNo
  return (
    <div className={styles.mobileSummary}>
      {showPromo ? <SignupPromoMobile /> : null}
      <SummaryBottomSheet>
        <div className={styles.wrapper}>
          <SummaryUI
            booking={booking}
            rooms={rooms}
            isMember={props.isMember}
            breakfastIncluded={props.breakfastIncluded}
            packages={packages}
            totalPrice={totalPrice}
            vat={vat}
            toggleSummaryOpen={toggleSummaryOpen}
            togglePriceDetailsModalOpen={togglePriceDetailsModalOpen}
          />
        </div>
      </SummaryBottomSheet>
    </div>
  )
}