"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 TotalPrice from "../TotalPrice"
import Room from "./Room"

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

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

interface MultiRoomProps {
  user: SafeUser
}

export default function MultiRoom(props: MultiRoomProps) {
  const intl = useIntl()
  const { allRoomsAreCancelled, rooms } = useMyStayStore((state) => ({
    allRoomsAreCancelled: state.allRoomsAreCancelled,
    rooms: state.rooms,
  }))

  if (rooms.length <= 1) {
    return null
  }

  return (
    <div className={styles.wrapper}>
      <Typography variant="Title/sm">
        <h2 className={styles.title}>
          {intl.formatMessage({
            defaultMessage: "Your rooms",
          })}
        </h2>
      </Typography>
      <div className={styles.container}>
        <div className={styles.roomsContainer}>
          {rooms.map((booking, index) => (
            <div
              key={booking.confirmationNumber}
              className={styles.roomWrapper}
            >
              <Room {...props} booking={booking} roomNr={index + 1} />
            </div>
          ))}
        </div>
      </div>
      <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>
  )
}