"use client"

import { useIntl } from "react-intl"

import { useEnterDetailsStore } from "@/stores/enter-details"

import { CheckIcon, EditIcon } from "@/components/Icons"
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"

import { SelectedRoomProps } from "@/types/components/hotelReservation/enterDetails/room"

export default function SelectedRoom({
  hotelId,
  room,
  rateDescription,
}: SelectedRoomProps) {
  const intl = useIntl()

  const selectRateUrl = useEnterDetailsStore((state) => state.selectRateUrl)

  return (
    <div className={styles.wrapper}>
      <div className={styles.iconWrapper}>
        <div className={styles.circle}>
          <CheckIcon color="white" height="16" width="16" />
        </div>
      </div>
      <div className={styles.main}>
        <div className={styles.headerContainer}>
          <div>
            <Footnote
              asChild
              textTransform="uppercase"
              type="label"
              color="uiTextHighContrast"
            >
              <h2>{intl.formatMessage({ id: "Your room" })}</h2>
            </Footnote>
            <Subtitle
              type="two"
              className={styles.selection}
              color="uiTextHighContrast"
            >
              {room.roomType}{" "}
              <span className={styles.rate}>{`(${rateDescription})`}</span>
            </Subtitle>
          </div>

          <Link
            color="burgundy"
            href={selectRateUrl}
            size="small"
            variant="icon"
          >
            <EditIcon color="burgundy" />
            {intl.formatMessage({ id: "Change room" })}{" "}
          </Link>
        </div>
        {room?.roomTypeCode && (
          <div className={styles.details}>
            <ToggleSidePeek
              hotelId={hotelId}
              roomTypeCode={room.roomTypeCode}
            />
          </div>
        )}
      </div>
    </div>
  )
}