"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"

export default function MobileSummary(props: SummaryProps) {
  const {
    booking,
    actions: { toggleSummaryOpen, togglePriceDetailsModalOpen },
    totalPrice,
    vat,
  } = useEnterDetailsStore((state) => state)

  const rooms = useEnterDetailsStore((state) => state.rooms)

  const showPromo =
    !props.isMember &&
    rooms.length === 1 &&
    !rooms[0].guest.join &&
    !rooms[0].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}
            totalPrice={totalPrice}
            vat={vat}
            toggleSummaryOpen={toggleSummaryOpen}
            togglePriceDetailsModalOpen={togglePriceDetailsModalOpen}
          />
        </div>
      </SummaryBottomSheet>
    </div>
  )
}