"use client"

import { useIntl } from "react-intl"

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

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

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

import type { RoomDetailsProps } from "@/types/components/sidePeeks/bookedRoomSidePeek"

export default function RoomDetails({
  roomDescription,
  roomFacilities,
  roomTypes,
}: RoomDetailsProps) {
  const intl = useIntl()

  const sortedFacilities = roomFacilities
    .sort((a, b) => a.sortOrder - b.sortOrder)
    .map((facility) => {
      const Icon = <FacilityIcon name={facility.icon} color="Icon/Default" />
      return { ...facility, Icon }
    })

  const bedOptions = roomTypes.map((roomType) => {
    const bedIconName = getBedIconName(roomType.mainBed.type)
    return { ...roomType, bedIconName }
  })

  return (
    <div className={styles.descriptionContainer}>
      <Typography variant="Body/Paragraph/mdRegular">
        <p className={styles.text}>{roomDescription}</p>
      </Typography>
      <div className={styles.listContainer}>
        <Typography variant="Title/Subtitle/md">
          <p className={styles.text}>
            {intl.formatMessage({ id: "This room is equipped with" })}
          </p>
        </Typography>
        <ul className={styles.facilityList}>
          {sortedFacilities.map(({ name, Icon }) => (
            <li key={name}>
              {Icon && Icon}
              <Typography variant="Body/Paragraph/mdRegular">
                <span className={styles.listText}>{name}</span>
              </Typography>
            </li>
          ))}
        </ul>
      </div>
      <div className={styles.listContainer}>
        <Typography variant="Title/Subtitle/md">
          <p className={styles.text}>
            {intl.formatMessage({ id: "Bed options" })}
          </p>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.text}>
            {intl.formatMessage({ id: "Based on availability" })}
          </p>
        </Typography>
        <ul className={styles.bedOptions}>
          {bedOptions.map(({ code, mainBed, bedIconName }) => (
            <li key={code}>
              <MaterialIcon icon={bedIconName} color="Icon/Default" size={24} />
              <Typography variant="Body/Paragraph/mdRegular">
                <span className={styles.listText}>{mainBed.description}</span>
              </Typography>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}