import Link from "next/link"

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

import { selectRateWithParams } from "@/constants/routes/hotelReservation"
import { dt } from "@/lib/dt"

import ImageGallery from "@/components/ImageGallery"
import { getBedIconName } from "@/components/SidePeeks/RoomSidePeek/bedIcon"
import Button from "@/components/TempDesignSystem/Button"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"

import { getRoomNameAsParam } from "../../utils"
import RoomFacilities from "./RoomFacilities"
import { getBedDescriptionText } from "./utils"

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

import type { RoomSidePeekProps } from "@/types/components/hotelPage/sidepeek/room"

export default async function RoomSidePeek({
  hotelId,
  room,
}: RoomSidePeekProps) {
  const lang = await getLang()
  const intl = await getIntl()
  const { roomSize, totalOccupancy, descriptions, images } = room
  const roomDescription = descriptions.medium

  const galleryImages = mapApiImagesToGalleryImages(images)

  const fromdate = dt().format("YYYY-MM-DD")
  const todate = dt().add(1, "day").format("YYYY-MM-DD")
  const selectRateURL = selectRateWithParams(lang, hotelId, fromdate, todate)
  return (
    <SidePeek
      contentKey={`room-${getRoomNameAsParam(room.name)}`}
      title={room.name}
    >
      <div className={styles.content}>
        <div className={styles.innerContent}>
          <Typography
            variant="Body/Paragraph/mdRegular"
            className={styles.guests}
          >
            <p>
              {intl.formatMessage(
                {
                  defaultMessage:
                    "Max. {max, plural, one {{range} guest} other {{range} guests}}",
                },
                {
                  max: totalOccupancy.max,
                  range: totalOccupancy.range,
                }
              )}
              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
              {". "}
              {roomSize.min === roomSize.max
                ? intl.formatMessage(
                    {
                      defaultMessage: "{roomSize} m²",
                    },
                    {
                      roomSize: roomSize.min,
                    }
                  )
                : intl.formatMessage(
                    {
                      defaultMessage: "{roomSizeMin}–{roomSizeMax} m²",
                    },
                    {
                      roomSizeMin: roomSize.min,
                      roomSizeMax: roomSize.max,
                    }
                  )}
            </p>
          </Typography>
          <div className={styles.imageContainer}>
            <ImageGallery
              images={galleryImages}
              title={room.name}
              height={280}
              hideLabel={true}
            />
          </div>
          <Typography variant="Body/Paragraph/mdRegular">
            <p>{roomDescription}</p>
          </Typography>
        </div>

        <div className={styles.innerContent}>
          <RoomFacilities roomFacilities={room.roomFacilities} />
        </div>

        <div className={styles.innerContent}>
          <div className={styles.bedOptions}>
            <Typography variant="Title/Subtitle/md">
              <h3>
                {intl.formatMessage({
                  defaultMessage: "Bed options",
                })}
              </h3>
            </Typography>
            <Typography variant="Body/Paragraph/mdRegular">
              <p>
                {intl.formatMessage({
                  defaultMessage: "Based on availability",
                })}
              </p>
            </Typography>
          </div>
          <ul className={styles.bedOptions}>
            {room.roomTypes.map((roomType) => {
              const iconName = getBedIconName(roomType.mainBed.type)
              const descriptionText = getBedDescriptionText(
                intl,
                roomType.mainBed
              )

              return (
                <li key={roomType.code} className={styles.listItem}>
                  <MaterialIcon
                    color="CurrentColor"
                    icon={iconName}
                    className={styles.icon}
                  />
                  <Typography variant="Body/Paragraph/mdRegular">
                    <span>{descriptionText}</span>
                  </Typography>
                </li>
              )
            })}
          </ul>
        </div>
      </div>
      <div className={styles.buttonContainer}>
        <Button theme="base" intent="primary" asChild>
          <Link href={selectRateURL}>
            {intl.formatMessage({
              defaultMessage: "Prices & availability",
            })}
          </Link>
        </Button>
      </div>
    </SidePeek>
  )
}
