"use client"

import { useIntl } from "react-intl"

import { RoomConfiguration } from "@/server/routers/hotels/output"

import { EditIcon, ImageIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

import ToggleSidePeek from "./ToggleSidePeek"

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

export default function SelectedRoom({
  hotelId,
  room,
}: {
  hotelId: string
  room: RoomConfiguration
}) {
  const intl = useIntl()
  return (
    <article className={styles.container}>
      <div className={styles.tempImage}>
        <ImageIcon
          color="baseButtonTertiaryOnFillNormal"
          height={60}
          width={60}
        />
      </div>
      <div className={styles.content}>
        <div>
          <div className={styles.textContainer}>
            <Footnote
              className={styles.label}
              color="uiTextPlaceholder"
              textTransform="uppercase"
            >
              {intl.formatMessage({ id: "Your room" })}
            </Footnote>
            <div className={styles.text}>
              {/**
               * [TEMP]
               * No translation on Subtitles as they will be derived
               * from Room selection.
               */}
              <Subtitle
                className={styles.room}
                color="uiTextHighContrast"
                type="two"
              >
                {room.roomType}
              </Subtitle>
              <Subtitle
                className={styles.invertFontWeight}
                color="uiTextMediumContrast"
                type="two"
              >
                Free rebooking
              </Subtitle>
              <Subtitle
                className={styles.invertFontWeight}
                color="uiTextMediumContrast"
                type="two"
              >
                Pay now
              </Subtitle>
            </div>
          </div>
          {room?.roomTypeCode && (
            <ToggleSidePeek
              hotelId={hotelId}
              roomTypeCode={room.roomTypeCode}
            />
          )}
        </div>
        <Button
          asChild
          intent="tertiary"
          size="small"
          theme="base"
          variant="icon"
        >
          <Link href="#">
            <EditIcon color="baseButtonTertiaryOnFillNormal" />
            {intl.formatMessage({ id: "Modify" })}
          </Link>
        </Button>
      </div>
    </article>
  )
}