import { useState } from "react"
import { useIntl } from "react-intl"

import { ChevronRightSmallIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

import ImageGallery from "../../ImageGallery"
import { getFacilityIcon } from "./facilityIcon"

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

import type { RoomSidePeekProps } from "@/types/components/hotelReservation/selectRate/roomSidePeek"

export default function RoomSidePeek({
  selectedRoom,
  roomConfiguration,
}: RoomSidePeekProps) {
  const [isSidePeekOpen, setIsSidePeekOpen] = useState(false)
  const intl = useIntl()

  const roomSize = selectedRoom?.roomSize
  const occupancy = selectedRoom?.occupancy.total
  const roomDescription = selectedRoom?.descriptions.medium
  const images = selectedRoom?.images

  return (
    <div>
      <Button
        intent="text"
        type="button"
        size="small"
        theme="base"
        className={styles.button}
        onClick={() => setIsSidePeekOpen(true)}
      >
        {intl.formatMessage({ id: "See room details" })}
        <ChevronRightSmallIcon color="burgundy" width={20} height={20} />
      </Button>

      <SidePeek
        title={roomConfiguration.roomType}
        isOpen={isSidePeekOpen}
        handleClose={() => setIsSidePeekOpen(false)}
      >
        <Body color="baseTextMediumContrast">
          {roomSize?.min === roomSize?.max
            ? roomSize?.min
            : `${roomSize?.min} - ${roomSize?.max}`}
          m².{" "}
          {intl.formatMessage(
            {
              id: "booking.accommodatesUpTo",
            },
            { nrOfGuests: occupancy }
          )}
        </Body>

        {images && (
          <div className={styles.imageContainer}>
            <ImageGallery images={images} title={roomConfiguration.roomType} />
          </div>
        )}

        <Body className={styles.description} color="uiTextHighContrast">
          {roomDescription}
        </Body>
        <Subtitle type="two" color="uiTextHighContrast">
          {intl.formatMessage({ id: "booking.thisRoomIsEquippedWith" })}
        </Subtitle>
        <ul className={styles.facilityList}>
          {selectedRoom?.roomFacilities
            .sort((a, b) => a.sortOrder - b.sortOrder)
            .map((facility) => {
              const Icon = getFacilityIcon(facility.name)

              return (
                <li key={facility.name}>
                  {Icon && <Icon color="uiTextMediumContrast" />}
                  <Body
                    asChild
                    className={!Icon ? styles.noIcon : undefined}
                    color="uiTextMediumContrast"
                  >
                    <span>{facility.name}</span>
                  </Body>
                </li>
              )
            })}
        </ul>
      </SidePeek>
    </div>
  )
}
