"use client"
import { useIntl } from "react-intl"

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

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

import PriceDetails from "../PriceDetails"
import MultiRoom from "./MultiRoom"
import SingleRoom from "./SingleRoom"
import TotalPrice from "./TotalPrice"

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

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

interface RoomsProps {
  user: SafeUser
}

export default function Rooms({ user }: RoomsProps) {
  const intl = useIntl()
  const { allRoomsAreCancelled, room, rooms, roomCategories } = useMyStayStore(
    (state) => ({
      allRoomsAreCancelled: state.allRoomsAreCancelled,
      hotel: state.hotel,
      room: state.bookedRoom.room,
      rooms: state.rooms,
      roomCategories: state.roomCategories,
    })
  )

  if (!room) {
    return null
  }

  const isMultiRoom = rooms.length > 1

  return (
    <div className={styles.wrapper}>
      {isMultiRoom && (
        <Typography variant="Title/sm">
          <h2 className={styles.title}>
            {intl.formatMessage({
              defaultMessage: "Your rooms",
            })}
          </h2>
        </Typography>
      )}
      <div className={styles.container}>
        {!isMultiRoom ? (
          <SingleRoom
            bedType={room.bedType}
            image={room.images[0]}
            user={user}
            roomCategories={roomCategories}
          />
        ) : (
          <div className={styles.roomsContainer}>
            {rooms.map((booking, index) => (
              <div
                key={booking.confirmationNumber}
                className={styles.roomWrapper}
              >
                <MultiRoom
                  booking={booking}
                  roomNr={index + 1}
                  user={user}
                  roomCategories={roomCategories}
                />
              </div>
            ))}
          </div>
        )}
      </div>
      {isMultiRoom && (
        <div className={styles.totalContainer}>
          <div className={styles.total}>
            <Typography variant="Body/Lead text">
              <p>
                {intl.formatMessage({
                  defaultMessage: "Booking total",
                })}
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                {":"}
              </p>
            </Typography>
            <TotalPrice />
          </div>

          {allRoomsAreCancelled ? null : <PriceDetails />}
        </div>
      )}
    </div>
  )
}