"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({ isMember }: SummaryProps) {
  const { isSummaryOpen, toggleSummaryOpen } = useEnterDetailsStore(
    (state) => ({
      isSummaryOpen: state.isSummaryOpen,
      toggleSummaryOpen: state.actions.toggleSummaryOpen,
    })
  )

  const { booking, rooms, totalPrice, vat } = useEnterDetailsStore((state) => ({
    booking: state.booking,
    rooms: state.rooms,
    totalPrice: state.totalPrice,
    vat: state.vat,
  }))

  const showPromo =
    !isMember &&
    rooms.length === 1 &&
    !rooms[0].room.guest.join &&
    !rooms[0].room.guest.membershipNo

  return (
    <div className={styles.mobileSummary}>
      {showPromo ? (
        <div className={styles.signupPromoWrapper}>
          <SignupPromoMobile />
        </div>
      ) : null}

      {isSummaryOpen && (
        <div
          className={styles.overlay}
          role="presentation"
          aria-hidden="true"
          onClick={toggleSummaryOpen}
        />
      )}

      <SummaryBottomSheet>
        <div className={styles.wrapper}>
          <SummaryUI
            booking={booking}
            rooms={rooms}
            isMember={isMember}
            totalPrice={totalPrice}
            vat={vat}
            toggleSummaryOpen={toggleSummaryOpen}
          />
        </div>
      </SummaryBottomSheet>
    </div>
  )
}