"use client"

import { useEnterDetailsStore } from "../../../../stores/enter-details"
import SignupPromoMobile from "../../../SignupPromo/Mobile"
import SummaryUI from "../UI"
import SummaryBottomSheet from "./BottomSheet"

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

type Props = {
  isUserLoggedIn: boolean
}
export default function MobileSummary({ isUserLoggedIn }: Props) {
  const { isSummaryOpen, toggleSummaryOpen } = useEnterDetailsStore(
    (state) => ({
      isSummaryOpen: state.isSummaryOpen,
      toggleSummaryOpen: state.actions.toggleSummaryOpen,
    })
  )

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

  const showPromo =
    !isUserLoggedIn &&
    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 isUserLoggedIn={isUserLoggedIn}>
        <div className={styles.wrapper}>
          <SummaryUI
            booking={booking}
            rooms={rooms}
            isUserLoggedIn={isUserLoggedIn}
            totalPrice={totalPrice}
            vat={vat}
            toggleSummaryOpen={toggleSummaryOpen}
            defaultCurrency={defaultCurrency}
          />
        </div>
      </SummaryBottomSheet>
    </div>
  )
}