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

  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 isUserLoggedIn={isUserLoggedIn} />
        </div>
      </SummaryBottomSheet>
    </div>
  )
}