"use client"

import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { useMyStayStore } from "@/stores/my-stay"

import GuestDetails from "@/components/HotelReservation/MyStay/GuestDetails"
import PriceDetails from "@/components/HotelReservation/MyStay/PriceDetails"

import BookingInformation from "./BookingInformation"
import Details from "./Details"
import Header from "./Header"
import Img from "./Img"
import Packages from "./Packages"

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

import type { SafeUser } from "@/types/user"

interface RoomProps {
  user: SafeUser
}

export default function SingleRoom({ user }: RoomProps) {
  const { refId, guest, isCancelled, isMultiRoom, roomName, roomNumber } =
    useMyStayStore((state) => ({
      refId: state.bookedRoom.refId,
      guest: state.bookedRoom.guest,
      isCancelled: state.bookedRoom.isCancelled,
      isMultiRoom: state.rooms.length > 1,
      roomName: state.bookedRoom.roomName,
      roomNumber: state.bookedRoom.roomNumber,
    }))

  if (isMultiRoom) {
    return null
  }

  if (!roomNumber) {
    return (
      <div className={styles.room}>
        <SkeletonShimmer width={"200px"} height="30px" />
        <SkeletonShimmer width="100%" height="750px" />
      </div>
    )
  }

  return (
    <div className={styles.wrapper}>
      <div className={styles.container}>
        <article className={styles.room}>
          <Typography variant="Title/Subtitle/lg">
            <p className={styles.roomName}>{roomName}</p>
          </Typography>
          <Header user={user} />
          <div className={styles.booking}>
            <div
              className={`${styles.content} ${isCancelled ? styles.cancelled : ""}`}
            >
              <Packages />
              <Img />
              <div className={styles.roomDetails}>
                <Details />
                <div className={styles.guestDetailsDesktopWrapper}>
                  <GuestDetails
                    refId={refId}
                    guest={guest}
                    isCancelled={isCancelled}
                    user={user}
                  />
                </div>
              </div>
            </div>
            <BookingInformation />
          </div>
          <PriceDetails />
          <div className={styles.guestDetailsMobileWrapper}>
            <GuestDetails
              refId={refId}
              guest={guest}
              isCancelled={isCancelled}
              user={user}
            />
          </div>
        </article>
      </div>
    </div>
  )
}