"use client"

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

import Summary from "@/components/HotelReservation/Summary"
import { SummaryBottomSheet } from "@/components/HotelReservation/Summary/BottomSheet"

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

import type { ClientSummaryProps } from "@/types/components/hotelReservation/enterDetails/summary"
import type { DetailsState } from "@/types/stores/enter-details"

function storeSelector(state: DetailsState) {
  return {
    bedType: state.bedType,
    breakfast: state.breakfast,
    fromDate: state.booking.fromDate,
    join: state.guest.join,
    membershipNo: state.guest.membershipNo,
    packages: state.packages,
    roomRate: state.roomRate,
    roomPrice: state.roomPrice,
    toDate: state.booking.toDate,
    toggleSummaryOpen: state.actions.toggleSummaryOpen,
    totalPrice: state.totalPrice,
  }
}

export default function ClientSummary({
  adults,
  cancellationText,
  isMember,
  kids,
  memberRate,
  rateDetails,
  roomType,
}: ClientSummaryProps) {
  const {
    bedType,
    breakfast,
    fromDate,
    join,
    membershipNo,
    packages,
    roomPrice,
    toDate,
    toggleSummaryOpen,
    totalPrice,
  } = useEnterDetailsStore(storeSelector)

  const showMemberPrice = !!(isMember && memberRate) || join || !!membershipNo
  const room = {
    adults,
    cancellationText,
    children: kids,
    packages,
    rateDetails,
    roomPrice,
    roomType,
  }

  return (
    <>
      <div className={styles.mobileSummary}>
        <SummaryBottomSheet>
          <div className={styles.summary}>
            <Summary
              bedType={bedType}
              breakfast={breakfast}
              fromDate={fromDate}
              showMemberPrice={showMemberPrice}
              room={room}
              toDate={toDate}
              toggleSummaryOpen={toggleSummaryOpen}
              totalPrice={totalPrice}
            />
          </div>
        </SummaryBottomSheet>
      </div>
      <div className={styles.desktopSummary}>
        <div className={styles.hider} />
        <div className={styles.summary}>
          <Summary
            bedType={bedType}
            breakfast={breakfast}
            fromDate={fromDate}
            showMemberPrice={showMemberPrice}
            room={room}
            toDate={toDate}
            totalPrice={totalPrice}
          />
        </div>
        <div className={styles.shadow} />
      </div>
    </>
  )
}