"use client"

import { useIntl } from "react-intl"

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

import { getBedIconName } from "@/components/utils"

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

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

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

  const filteredSortedFacilities = [...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: "roomSidePeek.roomFacilitiesTitle",
              defaultMessage: "This room is equipped with",
            })}
          </p>
        </Typography>
        <ul className={styles.facilityList}>
          {filteredSortedFacilities.map(
            ({ name, Icon, availableInAllRooms }) => (
              <li key={name}>
                {Icon}
                <Typography variant="Body/Paragraph/mdRegular">
                  <span className={styles.listText}>
                    {availableInAllRooms
                      ? name
                      : intl.formatMessage(
                          {
                            id: "roomSidePeek.facilityAvailableInSomeRooms",
                            defaultMessage:
                              "{facility} (available in some rooms)",
                          },
                          {
                            facility: name,
                          }
                        )}
                  </span>
                </Typography>
              </li>
            )
          )}
        </ul>
      </div>
      <div className={styles.listContainer}>
        <Typography variant="Title/Subtitle/md">
          <p className={styles.text}>
            {intl.formatMessage({
              id: "common.bedOptions",
              defaultMessage: "Bed options",
            })}
          </p>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.text}>
            {intl.formatMessage({
              id: "booking.subjectToAvailability",
              defaultMessage: "Subject to 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>
  )
}