import { useIntl } from "react-intl"

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

import ImageGallery from "@/components/ImageGallery"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"

import { getBedIconName } from "../bedIcon"
import { FacilityIcon } from "../facilityIcon"

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

import type { Room } from "@/types/hotel"

interface RoomSidePeekContentProps {
  room: Room
}

export function RoomSidePeekContent({ room }: RoomSidePeekContentProps) {
  const intl = useIntl()

  const roomSize = room.roomSize
  const totalOccupancy = room.totalOccupancy
  const roomDescription = room.descriptions.medium
  const galleryImages = mapApiImagesToGalleryImages(room.images)

  return (
    <div className={styles.wrapper}>
      <div className={styles.mainContent}>
        {totalOccupancy && (
          <Caption color="uiTextMediumContrast">
            {intl.formatMessage(
              {
                defaultMessage:
                  "Max. {max, plural, one {{range} guest} other {{range} guests}}",
              },
              {
                max: totalOccupancy.max,
                range: totalOccupancy.range,
              }
            )}
          </Caption>
        )}
        {roomSize && (
          <Caption color="uiTextMediumContrast">
            {roomSize.min === roomSize.max
              ? intl.formatMessage(
                  {
                    defaultMessage: "{roomSize} m²",
                  },
                  {
                    roomSize: roomSize.min,
                  }
                )
              : intl.formatMessage(
                  {
                    defaultMessage: "{roomSizeMin}–{roomSizeMax} m²",
                  },
                  {
                    roomSizeMin: roomSize.min,
                    roomSizeMax: roomSize.max,
                  }
                )}
          </Caption>
        )}
        <div className={styles.imageContainer}>
          <ImageGallery images={galleryImages} title={room.name} height={280} />
        </div>
        <Body color="uiTextHighContrast">{roomDescription}</Body>
      </div>
      <div className={styles.listContainer}>
        <Subtitle type="two" color="uiTextHighContrast">
          {intl.formatMessage({
            defaultMessage: "Room amenities",
          })}
        </Subtitle>
        <ul className={styles.facilityList}>
          {room.roomFacilities
            .sort((a, b) => a.sortOrder - b.sortOrder)
            .map((facility) => {
              return (
                <li key={facility.name}>
                  <FacilityIcon
                    name={facility.icon}
                    size={24}
                    color="Icon/Default"
                  />
                  <Body asChild color="uiTextMediumContrast">
                    <span>
                      {facility.availableInAllRooms
                        ? facility.name
                        : intl.formatMessage(
                            {
                              defaultMessage:
                                "{facility} (available in some rooms)",
                            },
                            {
                              facility: facility.name,
                            }
                          )}
                    </span>
                  </Body>
                </li>
              )
            })}
        </ul>
      </div>
      <div className={styles.listContainer}>
        <Subtitle type="two" color="uiTextHighContrast">
          {intl.formatMessage({
            defaultMessage: "Bed options",
          })}
        </Subtitle>
        <Body color="grey">
          {intl.formatMessage({
            defaultMessage: "Based on availability",
          })}
        </Body>
        <ul className={styles.bedOptions}>
          {room.roomTypes.map((roomType) => {
            const bedIcon = getBedIconName(roomType.mainBed.type)
            return (
              <li key={roomType.code}>
                <MaterialIcon icon={bedIcon} color="Icon/Feedback/Neutral" />
                <Body color="uiTextMediumContrast" asChild>
                  <span>{roomType.mainBed.description}</span>
                </Body>
              </li>
            )
          })}
        </ul>
      </div>
    </div>
  )
}
