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

import { useRatesStore } from "@/stores/select-rate"

import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

import RoomSize from "./RoomSize"
import ToggleSidePeek from "./ToggleSidePeek"

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

export default function Details({ roomTypeCode }: { roomTypeCode: string }) {
  const intl = useIntl()
  const { hotelId, roomCategories } = useRatesStore((state) => ({
    hotelId: state.booking.hotelId,
    roomCategories: state.roomCategories,
  }))

  const selectedRoom = roomCategories.find((roomCategory) =>
    roomCategory.roomTypes.find((roomType) => roomType.code === roomTypeCode)
  )

  const { name, occupancy, roomSize } = selectedRoom || {}

  return (
    <>
      <div className={styles.specification}>
        {occupancy && (
          <Caption color="uiTextMediumContrast">
            {occupancy.max === occupancy.min
              ? intl.formatMessage(
                  {
                    defaultMessage:
                      "{guests, plural, one {# guest} other {# guests}}",
                  },
                  { guests: occupancy.max }
                )
              : intl.formatMessage(
                  {
                    defaultMessage: "{min}-{max} guests",
                  },
                  {
                    min: occupancy.min,
                    max: occupancy.max,
                  }
                )}
          </Caption>
        )}
        <RoomSize roomSize={roomSize} />
        <div className={styles.toggleSidePeek}>
          {roomTypeCode && (
            <ToggleSidePeek hotelId={hotelId} roomTypeCode={roomTypeCode} />
          )}
        </div>
      </div>
      <div className={styles.roomDetails}>
        <Subtitle className={styles.name} type="two">
          {name}
        </Subtitle>
        {/* Out of scope for now
            <Body>{descriptions?.short}</Body>
            */}
      </div>
    </>
  )
}
