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 "../../HotelReservation/SelectRate/ImageGallery"
import { getFacilityIcon } from "./facilityIcon"

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

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

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

  const roomSize = room.roomSize
  const occupancy = room.occupancy.total
  const roomDescription = room.descriptions.medium
  const images = room.images

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

      <SidePeek
        title={room.name}
        isOpen={isSidePeekOpen}
        handleClose={() => setIsSidePeekOpen(false)}
      >
        <div className={styles.wrapper}>
          <div className={styles.mainContent}>
            <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={room.name} />
              </div>
            )}
            <Body color="uiTextHighContrast">{roomDescription}</Body>
          </div>
          <div className={styles.listContainer}>
            <Subtitle type="two" color="uiTextHighContrast">
              {intl.formatMessage({ id: "booking.thisRoomIsEquippedWith" })}
            </Subtitle>
            <ul className={styles.facilityList}>
              {room.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>
          </div>
          <div className={styles.listContainer}>
            <Subtitle type="two" color="uiTextHighContrast">
              {intl.formatMessage({ id: "booking.bedOptions" })}
            </Subtitle>
            <Body color="grey">
              {intl.formatMessage({ id: "booking.basedOnAvailability" })}
            </Body>
            {/* TODO: Get data for bed options */}
          </div>
        </div>
        <div className={styles.buttonContainer}>
          <Button fullWidth theme="base" intent="primary">
            {intl.formatMessage({ id: "booking.selectRoom" })}
            {/* TODO: Implement logic for select room */}
          </Button>
        </div>
      </SidePeek>
    </div>
  )
}
